SpaceZero Component Library Reference

import { Button } from '@/components/ui/button';

<Button variant="action" href="/path">Link Button</Button>

<Button variant="default" onClick={handler}>Default</Button>

<Button variant="destructive" disabled>Deleting...</Button>

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';

<Card>

<CardHeader>

<CardTitle><Icon name="Server" /><span>Feature</span></CardTitle>

<Badge>New</Badge>

</CardHeader>

<CardDescription>Description text</CardDescription>

<CardContent>Main content</CardContent>

<CardFooter>Footer actions</CardFooter>

</Card>

import { Hero, HeroTitle, HeroDescription } from '@/components/ui/hero';

<Hero>

<Badge>Tag</Badge>

<HeroTitle>Hero Title</HeroTitle>

<HeroDescription>Description text</HeroDescription>

</Hero>

import { Input } from '@/components/ui/input';

<Input

type="email"

placeholder="Enter email"

value={email}

onChange={e => setEmail(e.target.value)}

togglePassword

required

/>

import { Textarea } from '@/components/ui/textarea';

<Textarea

placeholder="Enter text..."

value={text}

onChange={e => setText(e.target.value)}

rows={4}

/>

import { Select } from '@/components/ui/select';

<Select

options={[

{ label: 'Option 1', value: '1' },

{ label: 'Option 2', value: '2', disabled: true },

]}

value={selected}

onValueChange={setSelected}

placeholder="Select..."

searchable

multiple

clearable

/>

import { Modal, ModalBackdrop, ModalDialog, ModalClose, ModalHeader, ModalIcon, ModalTitle, ModalDescription, ModalFooter, ModalBody } from '@/components/ui/modal';

import { Notice } from '@/components/ui/notice';

<Modal>

<ModalBackdrop />

<ModalDialog>

<ModalClose onClick={close}>

<Icon name="X" />

</ModalClose>

<ModalHeader>

<ModalIcon><Icon name="CheckCircle2" /></ModalIcon>

<ModalTitle>Success</ModalTitle>

</ModalHeader>

<ModalDescription>Operation completed.</ModalDescription>

<ModalBody>

<Notice>Additional info</Notice>

</ModalBody>

<ModalFooter>...</ModalFooter>

</ModalDialog>

</Modal>

import { Accordion, AccordionItem } from '@/components/ui/accordion';

<Accordion defaultValue="item-1">

<AccordionItem value="item-1" title="What is this?">

<p>Explanation here</p>

</AccordionItem>

<AccordionItem value="item-2" title="How does it work?">

<p>Details here</p>

</AccordionItem>

</Accordion>

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';

<Tabs defaultValue="overview">

<TabsList>

<TabsTrigger value="overview">Overview</TabsTrigger>

<TabsTrigger value="settings">Settings</TabsTrigger>

</TabsList>

<TabsContent value="overview"><p>Content</p></TabsContent>

<TabsContent value="settings"><p>Content</p></TabsContent>

</Tabs>

import { Badge } from '@/components/ui/badge';

<Badge variant="default">Default</Badge>

<Badge variant="action">Action</Badge>

<Badge variant="success">Success</Badge>

<Badge variant="warning">Warning</Badge>

<Badge variant="destructive">Destructive</Badge>

import { Progress } from '@/components/ui/progress';

<Progress value={75} max={100} label="Upload Progress" />

import { Spinner } from '@/components/ui/spinner';

<Spinner size={24} />

import { ToastProvider, useToast } from '@/components/ui/toast';

// Wrap app

<ToastProvider><App /></ToastProvider>

// In component

const { toast } = useToast();

toast.success('Saved!');

toast.destructive('Failed', 'Try again');

toast.warning('Warning');

toast.action('Info');

import { Icon } from '@/components/ui/icon';

<Icon name="Server" size={20} color="var(--action)" />

import { Link } from '@/components/ui/link';

<Link href="/path" variant="default">Link</Link>

<Link href="/path" variant="small">Small</Link>

<Link href="/path" variant="muted">Muted</Link>

<Link href="/path" variant="header">Header</Link>

<Link href="mailto:email" variant="email">Email</Link>

import { Code, CodeBlockTitle, CodeBlockItem, CodeInline } from '@/components/ui/code';

<Code>

<CodeBlockTitle><Icon name="Terminal" /><span>Setup</span></CodeBlockTitle>

<CodeBlockItem>Step 1</CodeBlockItem>

<CodeBlockItem>Step 2</CodeBlockItem>

</Code>

<CodeInline>npm install</CodeInline>

import { Article, ArticleSection, ArticleHeading, ArticleParagraph, ArticleList, ArticleListItem, ArticleStrong } from '@/components/ui/article';

<Article>

<ArticleSection>

<ArticleHeading>Section</ArticleHeading>

<ArticleParagraph>Text with <ArticleStrong>bold</ArticleStrong>.</ArticleParagraph>

<ArticleList>

<ArticleListItem>Item 1</ArticleListItem>

<ArticleListItem>Item 2</ArticleListItem>

</ArticleList>

</ArticleSection>

</Article>

import { NewsletterForm } from '@/components/ui/newsletter';

<NewsletterForm

title="Stay Updated"

description="Get the latest news"

buttonText="Subscribe"

/>

import { SkeletonLoader, SkeletonPost } from '@/components/infra/skeleton-loader';

<SkeletonLoader className="h-5 w-full" />

<SkeletonPost />

import { Toggle } from '@/components/ui/toggle';

<Toggle

checked={enabled}

onChange={setEnabled}

label="Enable feature"

variant="action"

/>

import { PricingCard } from '@/components/ui/pricing';

<PricingCard

gumroadProductId="myapp"

priceDisplay="