shadcn, but with taste.
A copy-paste component library built for speed, style, and sovereignty. Dark-first aesthetics, magnetic interactions, and GSAP-powered animations baked into every component.
Cartoon-style buttons with offset shadows and bold aesthetic
Gradient teal with cartoon shadow
<Button variant="default"> Ship It </Button>
Transparent with teal border shadow
<Button variant="outline"> Learn More </Button>
Minimal with no shadow
<Button variant="ghost"> Cancel </Button>
Light background with dark shadow
<Button variant="secondary"> Alternative </Button>
Teal glow effect with shadow
<Button variant="glow"> Let's Go </Button>
Square button for icons
<Button size="icon"> → </Button>
Hugeicons integration with button components
Icon positioned before text
<Button
iconLeft={<HugeiconsIcon icon={Download01Icon} />}
>
Download
</Button>Icon positioned after text
<Button
iconRight={<HugeiconsIcon icon={ArrowRight01Icon} />}
>
Next
</Button>Square buttons with icons
<Button size="icon">
<HugeiconsIcon icon={Home01Icon} size={20} />
</Button>Popular Hugeicons from the free pack
Syne for display, Manrope for body, JetBrains Mono for code — with Golos Text for Cyrillic support
Bold, geometric headers and hero text
font-family: Syne, system-ui
Clean, readable body text
font-family: Manrope, system-ui
Cyrillic fallback for display text
font-family: Syne, Golos Text, system-ui
Code blocks and technical content
font-family: Berkeley Mono, JetBrains Mono, monospace
xs (12px) → 7xl (72px) — 11 steps
Light (300) → Extrabold (800) — 6 weights
light (300)
Aa
normal (400)
Aa
medium (500)
Aa
semibold (600)
Aa
bold (700)
Aa
extrabold (800)
Aa
Text inputs with cartoon shadows and smooth focus transitions
Standard input with cartoon shadow
<Input placeholder="Enter text" inputSize="md" />
Transparent with teal border
<Input variant="outline" placeholder="Email" />
Minimal, appears on hover
<Input variant="ghost" placeholder="Search" />
Filled background with subtle shadow
<Input variant="solid" placeholder="Text" />
Accent glow on focus
<Input variant="glow" placeholder="Email" />
Left and right icon support
<Input
iconLeft={<SearchIcon />}
placeholder="Search"
/>Animated label that floats on focus
<FloatingInput label="Email" id="email" />
Error and success states
<Input error /> <Input success />
Multi-line text input
<Textarea placeholder="Message" />
Context menus with cartoon shadows and smooth animations
Simple dropdown with items
<DropdownMenu>
<DropdownMenuTrigger>
<Button>Menu</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
Profile
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Organized sections with labels
<DropdownMenuContent>
<DropdownMenuLabel>
Account
</DropdownMenuLabel>
<DropdownMenuItem>
Profile
</DropdownMenuItem>
</DropdownMenuContent>Keyboard shortcuts displayed
<DropdownMenuItem>
Copy
<DropdownMenuShortcut>
⌘C
</DropdownMenuShortcut>
</DropdownMenuItem>Toggleable menu items
<DropdownMenuCheckboxItem checked > Sidebar </DropdownMenuCheckboxItem>
Single selection from options
<DropdownMenuRadioGroup
value="dark"
>
<DropdownMenuRadioItem
value="light"
>
Light
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>Nested menu items
<DropdownMenuSub>
<DropdownMenuSubTrigger>
Share
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>
Email
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>Four variants for different content presentations
Standard card with dark background
Perfect for general content display with clean borders.
Frosted glass morphism effect
Semi-transparent with backdrop blur for layered interfaces.
Scales up on hover
Interactive cards that lift on hover for emphasis.
Accent border with glow
Highlights important content with accent glow effect.
Standard card with dark background
Perfect for general content display with clean borders.
Color palette, typography, and spacing system
Dark-first color system
Accent
Gray Scale
Semantic
Font sizes and families
Built on solid principles with modern tooling
Own your code. No npm bloat, no magic. Copy components directly into your project and customize freely.
Built for modern interfaces with a sophisticated dark aesthetic. No compromises, no apologies.
GSAP animations out of the box. Magnetic effects, smooth transitions, and signature interactions included.
Accessibility handled by Radix UI. Focus on design, not ARIA attributes and keyboard navigation.
Fully typed components with strict mode enabled. Catch errors at compile time, not production.
Built with Tailwind CSS. Customize with design tokens, no CSS-in-JS complexity to fight.