Bricked UI

A pixel-art UI kit built from orange bricks.
A chunky pixel-art kit for React and Svelte apps. Pick any of the 91 pieces — or the 51-piece Svelte registry — paste it into your project, and ship something with character.

Live demo · Design guide Components · Contributing

🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧

Bricked UI is a set of small, copy-and-own React components with one strong look:

• Brick-orange faces with a faint mortar pattern drawn in pixels
• Two cut corners on every surface (top-right and bottom-left), made with a stepped clip-path
• Hard bevels instead of borders or shadows: raised on the bottom/right, sunken on the top/left
• Pixel icons drawn on a grid, so they stay sharp at any size
• Steps-only animation, so nothing ever eases or blurs

Every component is its own file. Copy the ones you want, like you would with shadcn/ui.

🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧

# 1. copy the kit into your project
cp -r src/ your-app/src/bricked/

# 2. import the stylesheet once (it loads Press Start 2P and VT323 from Google Fonts)

import "./bricked/bricked.css";
import { Button, Card, Field, Input } from "./bricked";

export default function App() {
  return (
    <div className="bricked-ui">
      <Card title="Welcome">
        <Field label="Name" id="name">
          <Input id="name" placeholder="Your name" />
        </Field>
        <Button icon="rocket">Launch</Button>
      </Card>
    </div>
  );
}

Wrap your app (or any part of it) in className="bricked-ui" so text picks up the body font and the ink color.

🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧

Each one lives in src/<name>.jsx.

🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧

Icons are plain text grids. A 1 is a filled pixel.

rocket: [
  "0001000",
  "0011100",
  "0010100",
  "0011100",
  "0111110",
  "1101011",
  "0001000",
],

<Button icon="rocket">Launch</Button>
<PixelIcon name="heart" size={5} />

Built in: play plus minus check arrow heart star download upload home rocket cart dot down right left alert close user search

Add your own in src/pixel-icon.jsx. Keep strokes one pixel thick and skip anti-aliasing.

🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧

Sizes. Everything is a multiple of one pixel unit:

Fonts. Press Start 2P for buttons, labels and headers. VT323 for body text and inputs.

The full list of colors, bevel recipes and per-component measurements is in the style guide.

🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧

1. No border-radius. Ever.
2. Two cut corners per surface, top-right and bottom-left, as a 4-step staircase.
3. No borders, no blur. Depth comes from hard inset shadows only.
4. Raised = shade on the bottom/right. Sunken = shade on the top/left. Dark = ink with a #000 bevel.
5. Selected means orange brick: orange face, mortar pattern, raised bevel, ink text.
6. Text on orange is always ink. Never white.
7. Focus rings are drawn inside the element, because clip-path would clip an outline.
8. Animation uses steps() only. No smooth easing, no transitions.
9. Everything snaps to the pixel unit.

🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧

The kit ships as plain CSS. A Tailwind version is described in section 7 of the style guide: theme colors, custom utilities for the cut corners and brick pattern, and a cva button example.

• Real <button>, <input>, <select> and <label> elements
• Roles and ARIA on custom controls (switch, tab, dialog, progressbar, tooltip)
• Visible focus on every control
• Icon-only buttons need a label
• Loaders and click-triggered effects keep moving under reduced-motion settings. Only the idle skeleton pulse and caret blink are turned off.

Needs clip-path: polygon() with calc(), CSS custom properties and :focus-visible. That is every current version of Chrome, Edge, Firefox and Safari.

Known limit: clip-path clips anything that overflows a component. Keep tooltips and menus inside their card, and render modals outside any card.

bricked-ui/
├─ assets/
│  └─ banner.svg
├─ src/
│  ├─ bricked.css        # all tokens and component styles
│  ├─ index.js           # exports every component
│  ├─ pixel-icon.jsx     # icon grids + <PixelIcon />
│  ├─ button.jsx
│  ├─ card.jsx
│  └─ ...                # one file per component
├─ BRICKED-UI-STYLE-GUIDE.md
└─ README.md

🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧

Adding a component? Run through this list first:

• Pick the role: raised, sunken or dark
• Use --px, --cut and --icon from the size table
• Add the cut corners with bk-cut
• Use the right bevel for the role
• Press Start 2P for chrome, VT323 for content
• Add hover, active, focus (inside) and disabled states
• Draw icons on a 7×7 grid or larger, with no anti-aliasing
• Animate with steps() only
• Check nothing relies on overflowing outside the clipped box

• Fonts: Press Start 2P and VT323, both under the SIL Open Font License
• GitHub icon: a pixel trace of the GitHub mark

MIT. Replace this with your own license and add a LICENSE file before you publish.

🟧 Built one brick at a time 🟧