← StyleSeed home

Gallery

48 components (32 UI primitives + 16 composed patterns) × 7 brand skins. Each entry links to source code and registry metadata.

registry.jsonllms.txtGitHub

Live preview — Button under 3 skins

Smoke test: same component, three brand DNAs via data-skin attribute.

toss
raycast
arc

Patterns (16)

Composed components — cards, lists, navigation, feedback states

BottomNav

1.6KB
bottom-nav

BriefingCarousel

2.1KB
briefing-carousel

ChartCard

2.5KB
chart-card

DonutChartCard

4.4KB
donut-chart-card

EmptyState

1.1KB
empty-state

HeroCard

2.7KB
hero-card

InsightCard

1.7KB
insight-card

ListItem

1.5KB
list-item

NewsCard

1.7KB
news-card

PageShell

0.9KB
page-shell

Exports: PageShell, PageContent

ProgressBar

2.4KB
progress-bar

Exports: ProgressBar, DiscreteBar, ProgressBarWithLabel

RankedList

2.4KB
ranked-list

SectionCard

1.0KB
section-card

StatCard

1.9KB
stat-card

TopBar

1.6KB
top-bar

Exports: TopBar, TopBarAction

ValueDisplay

1.7KB
value-display

UI primitives (32)

Single-purpose building blocks — buttons, inputs, dialogs, etc.

Accordion

2.0KB
accordion

Exports: Accordion, AccordionItem, AccordionTrigger +1

Alert

1.6KB
alert

Exports: Alert, AlertTitle, AlertDescription

Avatar

1.1KB
avatar

Exports: Avatar, AvatarImage, AvatarFallback

Badge

1.6KB
badge

Button

3.0KB
button

Card

1.9KB
card

Exports: Card, CardHeader, CardFooter +4

Checkbox

1.2KB
checkbox

ConfirmModal

2.4KB
confirm-modal

DataDisplay

1.1KB
data-display

Dialog

3.7KB
dialog

Exports: Dialog, DialogClose, DialogContent +7

Drawer

2.4KB
drawer

DropdownMenu

8.1KB
dropdown-menu

Exports: DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger +12

Form

3.7KB
form

Exports: Form, FormItem, FormLabel +4

Input

0.9KB
input

Label

0.6KB
label

FadeIn

7.1KB
motion

Exports: FadeIn, FadeUp, Stagger +6

Popover

1.6KB
popover

Exports: Popover, PopoverTrigger, PopoverContent +1

Progress

0.7KB
progress

RadioGroup

1.4KB
radio-group

Exports: RadioGroup, RadioGroupItem

ScrollArea

1.6KB
scroll-area

Exports: ScrollArea, ScrollBar

SegmentedControl

1.4KB
segmented-control

Select

6.1KB
select

Exports: Select, SelectContent, SelectGroup +7

Separator

0.7KB
separator

Sheet

4.0KB
sheet

Exports: Sheet, SheetTrigger, SheetClose +5

Skeleton

0.3KB
skeleton

Switch

1.2KB
switch

Table

2.4KB
table

Exports: Table, TableHeader, TableBody +5

Tabs

1.9KB
tabs

Exports: Tabs, TabsList, TabsTrigger +1

Textarea

0.7KB
textarea

ToggleGroup

1.9KB
toggle-group

Exports: ToggleGroup, ToggleGroupItem

Toggle

1.5KB
toggle

Tooltip

1.9KB
tooltip

Exports: Tooltip, TooltipTrigger, TooltipContent +1

Brand skins

Each skin defines colors, radius, shadows, motion via CSS variables. Apply with data-skin="...".

Arc

Browser reimagined — playful, rainbow gradients on cream, generous radius

arc

Linear

Dark-mode-native design with indigo-violet accent on near-black surfaces and Inter Variable typography

linear

Notion

Warm neutral minimalism with Notion Blue accent and whisper-weight borders on a warm white canvas

notion

Raycast

Productivity launcher — dark, electric, multicolor gradient DNA

raycast

Stripe

Premium fintech design with signature purple CTAs and blue-tinted shadows on a clean white canvas

stripe

Toss

Korean fintech super-app — clean, minimal, data-focused

toss

Vercel

Monochrome developer-focused design with shadow-as-border technique and Geist typography

vercel