Components
- Accordion
- Action BarUpdated
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- BadgeUpdated
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- CalendarUpdated
- CardUpdated
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context MenuUpdated
- Data List
- Date Picker
- DialogUpdated
- DrawerUpdated
- Editable
- FieldUpdated
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- MarqueeUpdated
- Menu
- Native Select
- Number InputUpdated
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- TableUpdated
- Tabs
- Textarea
- TimerUpdated
- ToastUpdated
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Hooks
Styling
Guide to styling components with the color system.
Overview#
Shark UI’s styling system is built for clarity and consistent theming. It follows shadcn/ui theme tokens and adds three extra tokens: success, warning, and info to cover status states.
CSS Configuration#
See Installation for installing with CLI. To add the theme yourself, paste the following into globals.css:
@theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-info: var(--info); --color-info-foreground: var(--info-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-xs: calc(var(--radius) * 0.25); --radius-sm: calc(var(--radius) * 0.5); --radius-md: calc(var(--radius) * 0.75); --radius-lg: calc(var(--radius) * 1); --radius-xl: calc(var(--radius) * 1.5); --radius-2xl: calc(var(--radius) * 2); --radius-3xl: calc(var(--radius) * 3); --radius-4xl: calc(var(--radius) * 4); } :root { --radius: 0.5rem; --background: var(--color-neutral-50); --foreground: var(--color-neutral-800); --card: var(--color-neutral-50); --card-foreground: var(--color-neutral-800); --popover: var(--color-neutral-50); --popover-foreground: var(--color-neutral-800); --primary: var(--color-neutral-800); --primary-foreground: var(--color-neutral-50); --secondary: color-mix( in srgb, var(--color-neutral-950) 6%, var(--background) ); --secondary-foreground: var(--color-neutral-800); --muted: color-mix(in srgb, var(--color-neutral-950) 6%, var(--background)); --muted-foreground: color-mix( in srgb, var(--color-neutral-500) 80%, var(--color-neutral-950) ); --accent: color-mix(in srgb, var(--color-neutral-950) 6%, var(--background)); --accent-foreground: var(--color-neutral-800); --destructive: var(--color-red-500); --destructive-foreground: var(--color-red-700); --info: var(--color-blue-500); --info-foreground: var(--color-blue-700); --success: var(--color-emerald-500); --success-foreground: var(--color-emerald-700); --warning: var(--color-amber-500); --warning-foreground: var(--color-amber-700); --border: color-mix(in srgb, var(--color-neutral-950) 12%, var(--background)); --input: color-mix(in srgb, var(--color-neutral-950) 13%, var(--background)); --ring: var(--color-neutral-400); --sidebar: var(--color-neutral-50); --sidebar-foreground: color-mix( in srgb, var(--color-neutral-800) 64%, var(--sidebar) ); --sidebar-primary: var(--color-neutral-800); --sidebar-primary-foreground: var(--color-neutral-50); --sidebar-accent: color-mix( in srgb, var(--color-neutral-950) 6%, var(--sidebar) ); --sidebar-accent-foreground: var(--color-neutral-800); --sidebar-border: color-mix( in srgb, var(--color-neutral-950) 11%, var(--sidebar) ); --sidebar-ring: var(--color-neutral-400); --chart-1: var(--color-orange-600); --chart-2: var(--color-teal-600); --chart-3: var(--color-cyan-900); --chart-4: var(--color-amber-400); --chart-5: var(--color-amber-500); } .dark { --background: var(--color-neutral-950); --foreground: var(--color-neutral-100); --card: color-mix(in srgb, var(--background) 98%, var(--color-neutral-50)); --card-foreground: var(--color-neutral-100); --popover: color-mix( in srgb, var(--background) 96%, var(--color-neutral-50) ); --popover-foreground: var(--color-neutral-100); --primary: var(--color-neutral-100); --primary-foreground: var(--color-neutral-800); --secondary: color-mix(in srgb, var(--color-white) 8%, var(--background)); --secondary-foreground: var(--color-neutral-100); --muted: color-mix(in srgb, var(--color-neutral-50) 8%, var(--background)); --muted-foreground: color-mix( in srgb, var(--color-neutral-500) 70%, var(--color-neutral-50) ); --accent: color-mix(in srgb, var(--color-neutral-50) 8%, var(--background)); --accent-foreground: var(--color-neutral-100); --destructive: color-mix( in srgb, var(--color-red-600) 90%, var(--color-neutral-50) ); --destructive-foreground: var(--color-red-400); --info: var(--color-blue-500); --info-foreground: var(--color-blue-400); --success: var(--color-emerald-500); --success-foreground: var(--color-emerald-400); --warning: var(--color-amber-500); --warning-foreground: var(--color-amber-400); --border: color-mix(in srgb, var(--color-neutral-50) 12%, var(--background)); --input: color-mix(in srgb, var(--color-neutral-50) 13%, var(--background)); --ring: var(--color-neutral-500); --sidebar: color-mix( in srgb, var(--color-neutral-950) 97%, var(--color-neutral-50) ); --sidebar-foreground: color-mix( in srgb, var(--color-neutral-100) 64%, var(--sidebar) ); --sidebar-primary: var(--color-neutral-100); --sidebar-primary-foreground: var(--color-neutral-800); --sidebar-accent: color-mix( in srgb, var(--color-neutral-50) 8%, var(--sidebar) ); --sidebar-accent-foreground: var(--color-neutral-100); --sidebar-border: color-mix( in srgb, var(--color-neutral-50) 11%, var(--sidebar) ); --sidebar-ring: var(--color-neutral-400); --chart-1: var(--color-blue-700); --chart-2: var(--color-emerald-500); --chart-3: var(--color-amber-500); --chart-4: var(--color-purple-500); --chart-5: var(--color-rose-500); }
Token convention#
Each color has two tokens: the base name is the fill. The same name with -foreground is the text and icon color meant to sit on that fill. Use both together on every new surface so content stays readable.
<div className="bg-primary text-primary-foreground" />
Adding new tokens#
New variables must be wired through @theme inline as --color-* entries. See Tailwind CSS
@theme inline { --color-brand: var(--brand); --color-brand-foreground: var(--brand-foreground); } :root { --brand: oklch(0.55 0.18 250); --brand-foreground: oklch(0.99 0 0); }
Customizing colors#
Override variables on :root and .dark. Always update foreground when you change a fill.
:root { --primary: oklch(76.8% 0.233 130.85); --primary-foreground: oklch(98.6% 0.031 120.757); } .dark { --primary: oklch(53.2% 0.157 131.589); --primary-foreground: oklch(96.7% 0.067 122.328); }
Radius Scale#
--radius is the base radius token for your theme.
We derive a small radius scale from it so components can use consistent corner sizes while still sharing a single source of truth.
@theme inline { --radius-xs: calc(var(--radius) * 0.25); --radius-sm: calc(var(--radius) * 0.5); --radius-md: calc(var(--radius) * 0.75); --radius-lg: calc(var(--radius) * 1); --radius-xl: calc(var(--radius) * 1.5); --radius-2xl: calc(var(--radius) * 2); --radius-3xl: calc(var(--radius) * 3); --radius-4xl: calc(var(--radius) * 4); } :root { --radius: 0.5rem; }
This means:
radius-lgis the base value.- Smaller radius scale down from
--radius. - Larger radius scale up from
--radius. - Changing
--radiusupdates the entire radius scale.
Color system#
See Colors for the full token reference, and naming rules.