Checkout
Card fields, billing flag, and a short note.
01
02
03
04
05
06
07
08
09
10
11
12
2026
2027
2028
Overview
Introduction
Installation
Components
Roadmap
Forms
Angle Slider
Checkbox
Color Picker
Combobox
Date Picker
Editable
Field
Fieldset
File Upload
Input
Input Group
Label
Listbox
Number Field
Password Input
Pin Input
Radio Group
Rating Group
Segment Group
Select
Signature Pad
Slider
Switch
Tags Input
Textarea
Overlays
Alert Dialog
Command
Dialog
Floating Panel
Hover Card
Menu
Popover
Sheet
Tooltip
Tour
Navigation
Accordion
Breadcrumb
Collapsible
Pagination
Separator
Sidebar
Steps
Tabs
Tree View
Feedback
Alert
Progress Circular
Progress Linear
Spinner
Timer
Toast
Actions
Button
Button Group
Clipboard
Swap
Toggle
Toggle Group
Display
Avatar
Badge
Card
Carousel
Empty
Image Cropper
Item
Kbd
Marquee
Qr Code
Scroll Area
Skeleton
Splitter
Zoom Image
Utilities
Download Trigger
Focus Trap
Format Byte
Format Relative Time
Format Time
Highlight
Locale Provider
Presence
↑↓Navigate↵Open
EscCloseDefault
Amber Minimal
Bubblegum
Catppuccin
Cosmic Night
Dracula
Nord
Ocean Blue
Rose Garden
Tokyo Night
Gruvbox
Rosé Pine
Everforest
One Dark
Midnight
Forest
Slate
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Reset to preset default
Geist
System UI
Arial
Georgia
Times New Roman
Courier New
Roboto
0em
0.5rem
0.18
2px
0px
1px
Reset to default
Accordion
Stacked disclosures.
Shared spacing and radius tokens.
Optional power without visual noise on first load.
Queries
Command, search, and URL patterns.
12
Compute
Radio choice and stepped numeric value.
Environment
GPUs
Tabs
Segmented surface with shared indicator styling.
Content for the active tab.
Snippet or diff body.
Prop table or defaults.
Range
Dual-thumb slider.
$200 – $800
Composer
Prompt shell with a compact footer.
Auto
52%
Toggles
Switch, checkbox, and row actions.
Clipboard
Copy a stable URL.
https://ark-cn.vercel.app
Team & wayfinding
Avatars, status, and breadcrumb in one strip.
AK
CN
UI
No team yet
SyncingUpdating
Pagination & chips
Pager plus compact survey pills.
Notes & loading
Collapsible detail and a blocking state.
Collapsible keeps secondary copy out of the default scan path.
Processing…
Motion & hint
Swap icons and a tooltip trigger.
Short helper copy next to interactive controls.
Theme CSS
Format:
@import "tailwindcss";
@custom-variant dark (&:is(.dark *));
:root {
--background: oklch(0.99 0 0);
--foreground: oklch(0 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0 0 0);
--popover: oklch(0.99 0 0);
--popover-foreground: oklch(0 0 0);
--primary: oklch(0 0 0);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.94 0 0);
--secondary-foreground: oklch(0 0 0);
--accent: oklch(0.94 0 0);
--accent-foreground: oklch(0 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.44 0 0);
--destructive: oklch(0.63 0.19 23.03);
--destructive-foreground: oklch(1 0 0);
--info: oklch(0.62 0.17 254.13);
--info-foreground: oklch(0.47 0.15 254.13);
--success: oklch(0.72 0.17 162.48);
--success-foreground: oklch(0.53 0.14 162.48);
--warning: oklch(0.82 0.17 84.43);
--warning-foreground: oklch(0.65 0.14 84.43);
--border: oklch(0.92 0 0);
--input: oklch(0.94 0 0);
--ring: oklch(0 0 0);
--chart-1: oklch(0.81 0.17 75.35);
--chart-2: oklch(0.55 0.22 264.53);
--chart-3: oklch(0.72 0 0);
--chart-4: oklch(0.92 0 0);
--chart-5: oklch(0.56 0 0);
--sidebar: oklch(0.99 0 0);
--sidebar-foreground: oklch(0 0 0);
--sidebar-primary: oklch(0 0 0);
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.94 0 0);
--sidebar-accent-foreground: oklch(0 0 0);
--sidebar-border: oklch(0.94 0 0);
--sidebar-ring: oklch(0 0 0);
--font-sans: Geist, sans-serif;
--font-serif: Georgia, serif;
--font-mono: Geist Mono, monospace;
--radius: 0.5rem;
--tracking-normal: 0em;
--spacing: 0.25rem;
--shadow-x: 0px;
--shadow-y: 1px;
--shadow-blur: 2px;
--shadow-spread: 0px;
--shadow-opacity: 0.18;
--shadow-color: hsl(0 0% 0%);
--shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
--shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
--shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
--shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
--shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
--shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
--shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
--shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
}
.dark {
--background: oklch(0 0 0);
--foreground: oklch(1 0 0);
--card: oklch(0.14 0 0);
--card-foreground: oklch(1 0 0);
--popover: oklch(0.18 0 0);
--popover-foreground: oklch(1 0 0);
--primary: oklch(1 0 0);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.25 0 0);
--secondary-foreground: oklch(1 0 0);
--accent: oklch(0.32 0 0);
--accent-foreground: oklch(1 0 0);
--muted: oklch(0.23 0 0);
--muted-foreground: oklch(0.72 0 0);
--destructive: oklch(0.69 0.2 23.91);
--destructive-foreground: oklch(0 0 0);
--info: oklch(0.62 0.17 254.13);
--info-foreground: oklch(0.68 0.13 254.13);
--success: oklch(0.72 0.17 162.48);
--success-foreground: oklch(0.76 0.13 162.48);
--warning: oklch(0.82 0.17 84.43);
--warning-foreground: oklch(0.84 0.13 84.43);
--border: oklch(0.26 0 0);
--input: oklch(0.32 0 0);
--ring: oklch(0.72 0 0);
--chart-1: oklch(0.81 0.17 75.35);
--chart-2: oklch(0.58 0.21 260.84);
--chart-3: oklch(0.56 0 0);
--chart-4: oklch(0.44 0 0);
--chart-5: oklch(0.92 0 0);
--sidebar: oklch(0 0 0);
--sidebar-foreground: oklch(1 0 0);
--sidebar-primary: oklch(1 0 0);
--sidebar-primary-foreground: oklch(0 0 0);
--sidebar-accent: oklch(0.32 0 0);
--sidebar-accent-foreground: oklch(1 0 0);
--sidebar-border: oklch(0.32 0 0);
--sidebar-ring: oklch(0.72 0 0);
--font-sans: Geist, sans-serif;
--font-serif: Georgia, serif;
--font-mono: Geist Mono, monospace;
--radius: 0.5rem;
--tracking-normal: 0em;
--spacing: 0.25rem;
--shadow-x: 0px;
--shadow-y: 1px;
--shadow-blur: 2px;
--shadow-spread: 0px;
--shadow-opacity: 0.18;
--shadow-color: hsl(0 0% 0%);
--shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
--shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
--shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
--shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
--shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
--shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
--shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
--shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
}