---
name: "@bricked"
slug: "bricked"
description: "A chunky pixel-art kit for React and Svelte apps. Pick any of the 91 pieces."
category: "Charts/data viz"
tags: ["auth", "blocks", "buttons", "cards", "charts", "dashboard", "forms", "icons", "loaders", "media", "navigation", "overlays", "retro", "tables", "text-effects"]
framework: "svelte"
license: null
author: null
website: "https://bricked-ui.vercel.app"
github: null
registry: "https://bricked-ui.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 93
generated_at: "2026-10-20T06:35:22.791Z"
---

# @bricked

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

## Links

- Website: https://bricked-ui.vercel.app
- Registry JSON: https://bricked-ui.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/bricked
- This file: https://sh4dcn.vercel.app/md/bricked.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://bricked-ui.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://bricked-ui.vercel.app/r/registry.json
bunx shadcn@latest add https://bricked-ui.vercel.app/r/registry.json
# fetch the raw registry index
curl -s https://bricked-ui.vercel.app/r/registry.json
```

## Components (93)

| name | type | description | install |
| --- | --- | --- | --- |
| pixel-icon | registry: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 | registry:ui | Field headers, orange when open. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/accordion.json` |
| alert | registry:ui | Dark alert with title and body. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/alert.json` |
| alert-dialog | registry:ui | Blocking confirm with destructive action. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/alert-dialog.json` |
| aspect-ratio | registry:ui | Content locked to a ratio. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/aspect-ratio.json` |
| attachment | registry:ui | File row with metadata and actions. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/attachment.json` |
| avatar | registry:ui | Orange or dark 48px avatar. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/avatar.json` |
| badge | registry:ui | Orange or dark pixel badge. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/badge.json` |
| banner | registry:ui | Orange announcement bar. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/banner.json` |
| breadcrumbs | registry:ui | Links with separators, current page tag. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/breadcrumbs.json` |
| bubble | registry:ui | Chat bubble with variants and alignment. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/bubble.json` |
| button | registry: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 | registry:ui | Related buttons with shared styling. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/button-group.json` |
| calendar | registry:ui | Month grid with selected day. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/calendar.json` |
| card | registry:ui | Peach card with brick header and body. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/card.json` |
| carousel | registry:ui | Slides with prev/next and dots. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/carousel.json` |
| chart | registry:ui | Pixel bars from plain divs. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/chart.json` |
| checkbox | registry:ui | 28px sunken box, orange when checked. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/checkbox.json` |
| chips | registry:ui | Removable field tags. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/chips.json` |
| clock | registry:ui | Live 24h dark clock. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/clock.json` |
| code-block | registry:ui | Dark code with keyword/string tinting. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/code-block.json` |
| coin-flip | registry:ui | Orange/ink flip square. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/coin-flip.json` |
| collapsible | registry:ui | Single expand/collapse panel. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/collapsible.json` |
| color-picker | registry:ui | Swatch grid of the brick palette. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/color-picker.json` |
| combo-box | registry:ui | Searchable select with list. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/combo-box.json` |
| command-palette | registry:ui | Filterable search plus list dialog. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/command-palette.json` |
| context-menu | registry:ui | Right-click action menu. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/context-menu.json` |
| copy-button | registry:ui | Copies text, flips to a check on success. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/copy-button.json` |
| countdown | registry:ui | Ticking d/h/m/s boxes. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/countdown.json` |
| counter | registry:ui | Minus/plus stepper around a value box. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/counter.json` |
| data-table | registry:ui | Orange header table. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/data-table.json` |
| date-picker | registry:ui | Input opening a calendar. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/date-picker.json` |
| dialog | registry:ui | Accessible window over inert content. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/dialog.json` |
| dice | registry:ui | Rollable 72px die. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/dice.json` |
| direction | registry:ui | Sets text direction for a subtree. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/direction.json` |
| divider | registry:ui | Pixel dashed divider with label. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/divider.json` |
| drawer | registry:ui | Side slide-over panel. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/drawer.json` |
| dropdown-menu | registry:ui | Trigger plus dark menu list. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/dropdown-menu.json` |
| dropzone | registry:ui | File drop label plus compact file input. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/dropzone.json` |
| empty-state | registry:ui | Sunken empty slot with icon, text and action. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/empty-state.json` |
| field | registry:ui | Label, control wrapper and hint/error line. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/field.json` |
| fortune | registry:ui | Random answer box. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/fortune.json` |
| health-meter | registry:ui | Ten-segment HP bar. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/health-meter.json` |
| hover-card | registry:ui | Preview card behind a link. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/hover-card.json` |
| input | registry:ui | Sunken field input plus search and date variants. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/input.json` |
| input-group | registry:ui | Input with addons and buttons. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/input-group.json` |
| item | registry:ui | Media plus title, description, actions. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/item.json` |
| keycap | registry:ui | Field kbd chips with separators. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/keycap.json` |
| launch-pad | registry:ui | Sky box with flying rocket. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/launch-pad.json` |
| leaderboard | registry:ui | Ranked list with scores. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/leaderboard.json` |
| like-button | registry:ui | Field-surface like with heart burst and count. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/like-button.json` |
| list-group | registry:ui | Selectable field list. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/list-group.json` |
| marker | registry:ui | Inline status row or labeled separator. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/marker.json` |
| menubar | registry:ui | Desktop-style persistent menu bar. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/menubar.json` |
| message | registry:ui | Conversation message with avatar slot. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/message.json` |
| message-scroller | registry:ui | Chat scroll container. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/message-scroller.json` |
| modal | registry:ui | Overlay dialog. See also sheet, drawer, alert-dialog. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/modal.json` |
| navigation-menu | registry:ui | Collection of site links. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/navigation-menu.json` |
| otp-input | registry:ui | Segmented code boxes. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/otp-input.json` |
| pagination | registry:ui | Page buttons with prev/next. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/pagination.json` |
| popover | registry:ui | Dark bubble panel. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/popover.json` |
| progress | registry:ui | Segmented bar plus square ring gauge. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/progress.json` |
| questionnaire | registry:ui | Multi-step questions. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/questionnaire.json` |
| radio | registry:ui | Octagon radio with dot icon. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/radio.json` |
| radio-group | registry:ui | Set of exclusive radio buttons. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/radio-group.json` |
| rating | registry:ui | Five star radio buttons. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/rating.json` |
| resizable | registry:ui | Resizable panel groups. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/resizable.json` |
| ring-loader | registry:ui | Blinking 8-cube ring, plain or with label. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/ring-loader.json` |
| scroll-area | registry:ui | Sunken scroll container. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/scroll-area.json` |
| select | registry:ui | Native select plus styled native-select variant. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/select.json` |
| separator | registry:ui | Plain pixel rule. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/separator.json` |
| sheet | registry:ui | Sheet complementing the main content. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/sheet.json` |
| sidebar | registry:ui | Composable side navigation. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/sidebar.json` |
| sidebar-rail | registry:ui | Narrow icon rail for tight layouts. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/sidebar-rail.json` |
| skeleton | registry:ui | Pulsing box plus lines. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/skeleton.json` |
| slider | registry:ui | Range with orange fill and ink thumb. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/slider.json` |
| spinner | registry:ui | Loading indicator with label. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/spinner.json` |
| stacking-loader | registry:ui | Three dropping bricks. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/stacking-loader.json` |
| stat-card | registry:ui | Dark stat with label, value and badge slot. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/stat-card.json` |
| stepper | registry:ui | Numbered steps with connectors. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/stepper.json` |
| switch | registry:ui | Off/On two-half track switch plus single toggle. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/switch.json` |
| tabs | registry:ui | Brick tabs with sunken field panel. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/tabs.json` |
| textarea | registry:ui | Sunken multiline field. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/textarea.json` |
| timeline | registry:ui | Markers with shade connectors. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/timeline.json` |
| toast | registry:ui | Dark toast with icon and dismiss. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/toast.json` |
| toggle-group | registry:ui | Set of two-state buttons. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/toggle-group.json` |
| tooltip | registry:ui | Dark bubble on hover/focus. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/tooltip.json` |
| trace | registry:ui | Reasoning, tool calls and sources block. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/trace.json` |
| typewriter | registry:ui | Char reveal with caret. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/typewriter.json` |
| typography | registry:ui | Headings, paragraphs and lists. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/typography.json` |
| wall-builder | registry:ui | Layable brick wall with counter. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/wall-builder.json` |
| bricked-css | registry: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 | registry:lib | Tailwind v4 theme tokens and bk-cut / bk-bricks utilities. | `npx shadcn@latest add https://bricked-ui.vercel.app/r/bricked-globals.json` |

## For AI agents

```text
You are adding components from @bricked to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/bricked.md) for the component list.
2. Fetch the machine-readable index: https://bricked-ui.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: bricked).
```