Default Card
This is a standard card with content
Card content goes here
26 Components
Complete visual reference with code examples, different states, and usage guidelines for all components in the SeaOwl Design System.
Buttons & Actions
SeaOwlButton
Versatile button component with multiple variants, sizes, and states
<SeaOwlButton variant="default">Primary</SeaOwlButton>
<SeaOwlButton variant="secondary">Secondary</SeaOwlButton>
<SeaOwlButton variant="outline">Outline</SeaOwlButton>
<SeaOwlButton variant="seaowl">SeaOwl</SeaOwlButton>Form Controls
SeaOwlInput
Text input field with label, hint, error states, and icon support
<SeaOwlInput
label="Email Address"
placeholder="Enter your email..."
type="email"
/>
<SeaOwlInput
label="Search"
placeholder="Search..."
icon={<Search className="size-4" />}
/>SeaOwlTextarea
Multi-line text input with error states
<SeaOwlTextarea
placeholder="Enter a detailed description..."
rows={4}
/>SeaOwlCheckbox
Checkbox input with label support
<div className="flex items-center gap-2">
<SeaOwlCheckbox id="terms" />
<SeaOwlLabel htmlFor="terms">Accept terms and conditions</SeaOwlLabel>
</div>
<div className="flex items-center gap-2">
<SeaOwlCheckbox id="marketing" defaultChecked />
<SeaOwlLabel htmlFor="marketing">Subscribe to newsletter</SeaOwlLabel>
</div>SeaOwlSwitch
Toggle switch for binary options
<div className="flex items-center justify-between">
<SeaOwlLabel htmlFor="airplane-mode">Airplane Mode</SeaOwlLabel>
<SeaOwlSwitch id="airplane-mode" />
</div>
<div className="flex items-center justify-between">
<SeaOwlLabel htmlFor="notifications">Enable Notifications</SeaOwlLabel>
<SeaOwlSwitch id="notifications" defaultChecked />
</div>SeaOwlRadioGroup
Radio button group for single selection
<SeaOwlRadioGroup defaultValue="option-1">
<div className="flex items-center gap-2">
<SeaOwlRadioGroupItem value="option-1" id="option-1" />
<SeaOwlLabel htmlFor="option-1">Option 1</SeaOwlLabel>
</div>
<div className="flex items-center gap-2">
<SeaOwlRadioGroupItem value="option-2" id="option-2" />
<SeaOwlLabel htmlFor="option-2">Option 2</SeaOwlLabel>
</div>
<div className="flex items-center gap-2">
<SeaOwlRadioGroupItem value="option-3" id="option-3" />
<SeaOwlLabel htmlFor="option-3">Option 3</SeaOwlLabel>
</div>
</SeaOwlRadioGroup>SeaOwlSelect
Dropdown select component for choosing options
<SeaOwlSelect>
<SeaOwlSelectTrigger>
<SeaOwlSelectValue placeholder="Select a framework" />
</SeaOwlSelectTrigger>
<SeaOwlSelectContent>
<SeaOwlSelectItem value="next">Next.js</SeaOwlSelectItem>
<SeaOwlSelectItem value="react">React</SeaOwlSelectItem>
<SeaOwlSelectItem value="vue">Vue</SeaOwlSelectItem>
<SeaOwlSelectItem value="svelte">Svelte</SeaOwlSelectItem>
</SeaOwlSelectContent>
</SeaOwlSelect>SeaOwlSlider
Range slider for numeric input
<div>
<SeaOwlLabel>Volume</SeaOwlLabel>
<SeaOwlSlider defaultValue={[50]} max={100} step={1} />
</div>
<div>
<SeaOwlLabel>Range</SeaOwlLabel>
<SeaOwlSlider defaultValue={[25, 75]} max={100} step={1} />
</div>Feedback & Display
SeaOwlBadge
Labels and tags for status, categories, and tech stacks
DefaultSuccessWarningErrorOutline
<SeaOwlBadge variant="default">Default</SeaOwlBadge>
<SeaOwlBadge variant="success">Success</SeaOwlBadge>
<SeaOwlBadge variant="warning">Warning</SeaOwlBadge>
<SeaOwlBadge variant="destructive">Error</SeaOwlBadge>
<SeaOwlBadge variant="outline">Outline</SeaOwlBadge>SeaOwlAlert
Alert messages for important information and notifications
System Update
A new version is available. Please update to continue.
<SeaOwlAlert variant="default">
<Terminal className="size-4" />
<SeaOwlAlertTitle>System Update</SeaOwlAlertTitle>
<SeaOwlAlertDescription>
A new version is available. Please update to continue.
</SeaOwlAlertDescription>
</SeaOwlAlert>SeaOwlProgress
Progress bar for loading states and completion tracking
<SeaOwlProgress value={25} />
<SeaOwlProgress value={50} />
<SeaOwlProgress value={75} />SeaOwlStatus
Animated status indicators with optional labels
Online
Recording
Warning
Offline
<SeaOwlStatus status="online" label="Online" />
<SeaOwlStatus status="capturing" label="Recording" />
<SeaOwlStatus status="warning" label="Warning" />
<SeaOwlStatus status="offline" label="Offline" />SeaOwlTooltip
Contextual tooltips for additional information
<SeaOwlTooltipProvider>
<SeaOwlTooltip>
<SeaOwlTooltipTrigger asChild>
<SeaOwlButton variant="outline">Hover me</SeaOwlButton>
</SeaOwlTooltipTrigger>
<SeaOwlTooltipContent>
<p>This is a tooltip</p>
</SeaOwlTooltipContent>
</SeaOwlTooltip>
</SeaOwlTooltipProvider>Layout & Structure
SeaOwlCard
Flexible card container with header, content, and footer sections
Featured Card
This card stands out with a border glow
Featured content with special styling
<SeaOwlCard>
<SeaOwlCardHeader>
<SeaOwlCardTitle>Default Card</SeaOwlCardTitle>
<SeaOwlCardDescription>This is a standard card with content</SeaOwlCardDescription>
</SeaOwlCardHeader>
<SeaOwlCardContent>
<p>Card content goes here</p>
</SeaOwlCardContent>
<SeaOwlCardFooter>
<SeaOwlButton variant="default">Action</SeaOwlButton>
</SeaOwlCardFooter>
</SeaOwlCard>
<SeaOwlCard variant="featured">
<SeaOwlCardHeader>
<SeaOwlBadge variant="featured">Featured</SeaOwlBadge>
<SeaOwlCardTitle>Featured Card</SeaOwlCardTitle>
<SeaOwlCardDescription>This card stands out</SeaOwlCardDescription>
</SeaOwlCardHeader>
<SeaOwlCardContent>
<p>Featured content</p>
</SeaOwlCardContent>
</SeaOwlCard>SeaOwlTabs
Tabbed interface for organizing content
Account settings and information
<SeaOwlTabs defaultValue="tab1">
<SeaOwlTabsList>
<SeaOwlTabsTrigger value="tab1">Account</SeaOwlTabsTrigger>
<SeaOwlTabsTrigger value="tab2">Settings</SeaOwlTabsTrigger>
<SeaOwlTabsTrigger value="tab3">Security</SeaOwlTabsTrigger>
</SeaOwlTabsList>
<SeaOwlTabsContent value="tab1">
<p>Account settings and information</p>
</SeaOwlTabsContent>
<SeaOwlTabsContent value="tab2">
<p>Application preferences</p>
</SeaOwlTabsContent>
<SeaOwlTabsContent value="tab3">
<p>Security and privacy options</p>
</SeaOwlTabsContent>
</SeaOwlTabs>SeaOwlAccordion
Collapsible content sections
<SeaOwlAccordion type="single" collapsible>
<SeaOwlAccordionItem value="item-1">
<SeaOwlAccordionTrigger>What is the SeaOwl Design System?</SeaOwlAccordionTrigger>
<SeaOwlAccordionContent>
A comprehensive, accessible design system with cyber aesthetics...
</SeaOwlAccordionContent>
</SeaOwlAccordionItem>
<SeaOwlAccordionItem value="item-2">
<SeaOwlAccordionTrigger>Is it accessible?</SeaOwlAccordionTrigger>
<SeaOwlAccordionContent>
Yes, all components meet WCAG AA standards...
</SeaOwlAccordionContent>
</SeaOwlAccordionItem>
</SeaOwlAccordion>SeaOwlDialog
Modal dialog for focused interactions
<SeaOwlDialog>
<SeaOwlDialogTrigger asChild>
<SeaOwlButton>Open Dialog</SeaOwlButton>
</SeaOwlDialogTrigger>
<SeaOwlDialogContent>
<SeaOwlDialogHeader>
<SeaOwlDialogTitle>Confirm Action</SeaOwlDialogTitle>
<SeaOwlDialogDescription>
Are you sure you want to proceed?
</SeaOwlDialogDescription>
</SeaOwlDialogHeader>
<SeaOwlDialogFooter>
<SeaOwlButton variant="outline">Cancel</SeaOwlButton>
<SeaOwlButton>Continue</SeaOwlButton>
</SeaOwlDialogFooter>
</SeaOwlDialogContent>
</SeaOwlDialog>SeaOwlDivider
Section divider with optional label
Section Label
Components
<SeaOwlDivider />
<SeaOwlDivider label="Section Label" />
<SeaOwlDivider label="Components" />