@bricked

A chunky pixel-art kit for React and Svelte apps. Pick any of the 91 pieces.

93 components svelte shadcn-cli

website ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://bricked-ui.vercel.app/r/registry.json

pnpm pnpm dlx shadcn@latest add https://bricked-ui.vercel.app/r/registry.json

bun bunx shadcn@latest add https://bricked-ui.vercel.app/r/registry.json

fetch registry curl -s https://bricked-ui.vercel.app/r/registry.json

Components

93 total

Pixel Icon ui

930 pixel icons as SVG paths (7x7 grids, 16x16 brand marks, 42x42 Streamline Pixel set — CC BY 4.0, credit: Streamline, streamlinehq.com). Every component take…

npx shadcn@latest add https://bricked-ui.vercel.app/r/pixel-icon.json

Accordion ui

Field headers, orange when open.

npx shadcn@latest add https://bricked-ui.vercel.app/r/accordion.json

Alert ui

Dark alert with title and body.

npx shadcn@latest add https://bricked-ui.vercel.app/r/alert.json

Alert dialog ui

Blocking confirm with destructive action.

npx shadcn@latest add https://bricked-ui.vercel.app/r/alert-dialog.json

Aspect ratio ui

Content locked to a ratio.

npx shadcn@latest add https://bricked-ui.vercel.app/r/aspect-ratio.json

Attachment ui

File row with metadata and actions.

npx shadcn@latest add https://bricked-ui.vercel.app/r/attachment.json

Avatar ui

Orange or dark 48px avatar.

npx shadcn@latest add https://bricked-ui.vercel.app/r/avatar.json

Badge ui

Orange or dark pixel badge.

npx shadcn@latest add https://bricked-ui.vercel.app/r/badge.json

Banner ui

Orange announcement bar.

npx shadcn@latest add https://bricked-ui.vercel.app/r/banner.json

Breadcrumbs ui

Links with separators, current page tag.

npx shadcn@latest add https://bricked-ui.vercel.app/r/breadcrumbs.json

Bubble ui

Chat bubble with variants and alignment.

npx shadcn@latest add https://bricked-ui.vercel.app/r/bubble.json

Button ui

Brick button + square icon-button variant. sm/md/lg, primary/dark, left/right icon slots.

npx shadcn@latest add https://bricked-ui.vercel.app/r/button.json

Button group ui

Related buttons with shared styling.

npx shadcn@latest add https://bricked-ui.vercel.app/r/button-group.json

Calendar ui

Month grid with selected day.

npx shadcn@latest add https://bricked-ui.vercel.app/r/calendar.json

Card ui

Peach card with brick header and body.

npx shadcn@latest add https://bricked-ui.vercel.app/r/card.json

Carousel ui

Slides with prev/next and dots.

npx shadcn@latest add https://bricked-ui.vercel.app/r/carousel.json

Chart ui

Pixel bars from plain divs.

npx shadcn@latest add https://bricked-ui.vercel.app/r/chart.json

Checkbox ui

28px sunken box, orange when checked.

npx shadcn@latest add https://bricked-ui.vercel.app/r/checkbox.json

Chips ui

Removable field tags.

npx shadcn@latest add https://bricked-ui.vercel.app/r/chips.json

Clock ui

Live 24h dark clock.

npx shadcn@latest add https://bricked-ui.vercel.app/r/clock.json

Code block ui

Dark code with keyword/string tinting.

npx shadcn@latest add https://bricked-ui.vercel.app/r/code-block.json

Coin flip ui

Orange/ink flip square.

npx shadcn@latest add https://bricked-ui.vercel.app/r/coin-flip.json

Collapsible ui

Single expand/collapse panel.

npx shadcn@latest add https://bricked-ui.vercel.app/r/collapsible.json

Color picker ui

Swatch grid of the brick palette.

npx shadcn@latest add https://bricked-ui.vercel.app/r/color-picker.json

Combobox ui

Searchable select with list.

npx shadcn@latest add https://bricked-ui.vercel.app/r/combo-box.json

Command palette ui

Filterable search plus list dialog.

npx shadcn@latest add https://bricked-ui.vercel.app/r/command-palette.json

Context menu ui

Right-click action menu.

npx shadcn@latest add https://bricked-ui.vercel.app/r/context-menu.json

Copy button ui

Copies text, flips to a check on success.

npx shadcn@latest add https://bricked-ui.vercel.app/r/copy-button.json

Countdown ui

Ticking d/h/m/s boxes.

npx shadcn@latest add https://bricked-ui.vercel.app/r/countdown.json

Counter ui

Minus/plus stepper around a value box.

npx shadcn@latest add https://bricked-ui.vercel.app/r/counter.json

Data table ui

Orange header table.

npx shadcn@latest add https://bricked-ui.vercel.app/r/data-table.json

Date picker ui

Input opening a calendar.

npx shadcn@latest add https://bricked-ui.vercel.app/r/date-picker.json

Dialog ui

Accessible window over inert content.

npx shadcn@latest add https://bricked-ui.vercel.app/r/dialog.json

Dice ui

Rollable 72px die.

npx shadcn@latest add https://bricked-ui.vercel.app/r/dice.json

Direction ui

Sets text direction for a subtree.

npx shadcn@latest add https://bricked-ui.vercel.app/r/direction.json

Divider ui

Pixel dashed divider with label.

npx shadcn@latest add https://bricked-ui.vercel.app/r/divider.json

Drawer ui

Side slide-over panel.

npx shadcn@latest add https://bricked-ui.vercel.app/r/drawer.json

Dropdown menu ui

Trigger plus dark menu list.

npx shadcn@latest add https://bricked-ui.vercel.app/r/dropdown-menu.json

Dropzone ui

File drop label plus compact file input.

npx shadcn@latest add https://bricked-ui.vercel.app/r/dropzone.json

Empty state ui

Sunken empty slot with icon, text and action.

npx shadcn@latest add https://bricked-ui.vercel.app/r/empty-state.json

Field ui

Label, control wrapper and hint/error line.

npx shadcn@latest add https://bricked-ui.vercel.app/r/field.json

Ask the wall ui

Random answer box.

npx shadcn@latest add https://bricked-ui.vercel.app/r/fortune.json

Health meter ui

Ten-segment HP bar.

npx shadcn@latest add https://bricked-ui.vercel.app/r/health-meter.json

Hover card ui

Preview card behind a link.

npx shadcn@latest add https://bricked-ui.vercel.app/r/hover-card.json

Input ui

Sunken field input plus search and date variants.

npx shadcn@latest add https://bricked-ui.vercel.app/r/input.json

Input group ui

Input with addons and buttons.

npx shadcn@latest add https://bricked-ui.vercel.app/r/input-group.json

Item ui

Media plus title, description, actions.

npx shadcn@latest add https://bricked-ui.vercel.app/r/item.json

Keycap ui

Field kbd chips with separators.

npx shadcn@latest add https://bricked-ui.vercel.app/r/keycap.json

Launch pad ui

Sky box with flying rocket.

npx shadcn@latest add https://bricked-ui.vercel.app/r/launch-pad.json

Leaderboard ui

Ranked list with scores.

npx shadcn@latest add https://bricked-ui.vercel.app/r/leaderboard.json

Like button ui

Field-surface like with heart burst and count.

npx shadcn@latest add https://bricked-ui.vercel.app/r/like-button.json

List group ui

Selectable field list.

npx shadcn@latest add https://bricked-ui.vercel.app/r/list-group.json

Marker ui

Inline status row or labeled separator.

npx shadcn@latest add https://bricked-ui.vercel.app/r/marker.json

Menubar ui

Desktop-style persistent menu bar.

npx shadcn@latest add https://bricked-ui.vercel.app/r/menubar.json

Message ui

Conversation message with avatar slot.

npx shadcn@latest add https://bricked-ui.vercel.app/r/message.json

Message scroller ui

Chat scroll container.

npx shadcn@latest add https://bricked-ui.vercel.app/r/message-scroller.json

Modal ui

Overlay dialog. See also sheet, drawer, alert-dialog.

npx shadcn@latest add https://bricked-ui.vercel.app/r/modal.json

Navigation menu ui

Collection of site links.

npx shadcn@latest add https://bricked-ui.vercel.app/r/navigation-menu.json

OTP input ui

Segmented code boxes.

npx shadcn@latest add https://bricked-ui.vercel.app/r/otp-input.json

Pagination ui

Page buttons with prev/next.

npx shadcn@latest add https://bricked-ui.vercel.app/r/pagination.json

Popover ui

Dark bubble panel.

npx shadcn@latest add https://bricked-ui.vercel.app/r/popover.json

Progress ui

Segmented bar plus square ring gauge.

npx shadcn@latest add https://bricked-ui.vercel.app/r/progress.json

Questionnaire ui

Multi-step questions.

npx shadcn@latest add https://bricked-ui.vercel.app/r/questionnaire.json

Radio ui

Octagon radio with dot icon.

npx shadcn@latest add https://bricked-ui.vercel.app/r/radio.json

Radio group ui

Set of exclusive radio buttons.

npx shadcn@latest add https://bricked-ui.vercel.app/r/radio-group.json

Rating ui

Five star radio buttons.

npx shadcn@latest add https://bricked-ui.vercel.app/r/rating.json

Resizable ui

Resizable panel groups.

npx shadcn@latest add https://bricked-ui.vercel.app/r/resizable.json

Ring loader ui

Blinking 8-cube ring, plain or with label.

npx shadcn@latest add https://bricked-ui.vercel.app/r/ring-loader.json

Scroll area ui

Sunken scroll container.

npx shadcn@latest add https://bricked-ui.vercel.app/r/scroll-area.json

Select ui

Native select plus styled native-select variant.

npx shadcn@latest add https://bricked-ui.vercel.app/r/select.json

Separator ui

Plain pixel rule.

npx shadcn@latest add https://bricked-ui.vercel.app/r/separator.json

Sheet ui

Sheet complementing the main content.

npx shadcn@latest add https://bricked-ui.vercel.app/r/sheet.json

Sidebar ui

Composable side navigation.

npx shadcn@latest add https://bricked-ui.vercel.app/r/sidebar.json

Sidebar rail ui

Narrow icon rail for tight layouts.

npx shadcn@latest add https://bricked-ui.vercel.app/r/sidebar-rail.json

Skeleton ui

Pulsing box plus lines.

npx shadcn@latest add https://bricked-ui.vercel.app/r/skeleton.json

Slider ui

Range with orange fill and ink thumb.

npx shadcn@latest add https://bricked-ui.vercel.app/r/slider.json

Spinner ui

Loading indicator with label.

npx shadcn@latest add https://bricked-ui.vercel.app/r/spinner.json

Stacking loader ui

Three dropping bricks.

npx shadcn@latest add https://bricked-ui.vercel.app/r/stacking-loader.json

Stat card ui

Dark stat with label, value and badge slot.

npx shadcn@latest add https://bricked-ui.vercel.app/r/stat-card.json

Stepper ui

Numbered steps with connectors.

npx shadcn@latest add https://bricked-ui.vercel.app/r/stepper.json

Switch ui

Off/On two-half track switch plus single toggle.

npx shadcn@latest add https://bricked-ui.vercel.app/r/switch.json

Tabs ui

Brick tabs with sunken field panel.

npx shadcn@latest add https://bricked-ui.vercel.app/r/tabs.json

Textarea ui

Sunken multiline field.

npx shadcn@latest add https://bricked-ui.vercel.app/r/textarea.json

Timeline ui

Markers with shade connectors.

npx shadcn@latest add https://bricked-ui.vercel.app/r/timeline.json

Toast ui

Dark toast with icon and dismiss.

npx shadcn@latest add https://bricked-ui.vercel.app/r/toast.json

Toggle group ui

Set of two-state buttons.

npx shadcn@latest add https://bricked-ui.vercel.app/r/toggle-group.json

Tooltip ui

Dark bubble on hover/focus.

npx shadcn@latest add https://bricked-ui.vercel.app/r/tooltip.json

Trace ui

Reasoning, tool calls and sources block.

npx shadcn@latest add https://bricked-ui.vercel.app/r/trace.json

Typewriter ui

Char reveal with caret.

npx shadcn@latest add https://bricked-ui.vercel.app/r/typewriter.json

Typography ui

Headings, paragraphs and lists.

npx shadcn@latest add https://bricked-ui.vercel.app/r/typography.json

Wall builder ui

Layable brick wall with counter.

npx shadcn@latest add https://bricked-ui.vercel.app/r/wall-builder.json

Bricked CSS lib

Full bk-* stylesheet. Installs automatically as a dependency of every component - import it once in your CSS entry.

npx shadcn@latest add https://bricked-ui.vercel.app/r/bricked-css.json

Bricked globals lib

Tailwind v4 theme tokens and bk-cut / bk-bricks utilities.

npx shadcn@latest add https://bricked-ui.vercel.app/r/bricked-globals.json