Getting started

Pixelbits is a React 19 UI kit: a calm, minimal base with pixel effects at the moment of interaction. Use it as an npm package, or copy single components into your project with the shadcn CLI.

1. Install

pnpm add pixelbits

2. Add the styles

With Tailwind v4, import the theme after Tailwind. It adds the tokens, the pb- utilities (bg-pb-surface, text-pb-muted…) and tells Tailwind to scan the kit for the classes it uses.

@import "tailwindcss";
@import "pixelbits/theme.css";

Without Tailwind, import the precompiled stylesheet once (about 9 kB gzipped for every component):

import "pixelbits/styles.css";

3. Use components

Import each component from its own entry; anything you do not import is not in your bundle. Server components work for the static ones (Card, Table, Accordion, Skeleton…); interactive ones are marked "use client" inside the kit.

import { Button } from "pixelbits/button";
import { Field } from "pixelbits/field";
import { Input } from "pixelbits/input";

export default function Page() {
  return (
    <form>
      <Field label="Email" required>
        <Input type="email" />
      </Field>
      <Button variant="primary" type="submit">Subscribe</Button>
    </form>
  );
}

Theme, accent and direction

Dark is the default. Set data-theme="light" (or "system") on <html> or on any element, and data-accent="platinum" | "emerald" | "sapphire" | "ruby" | "amethyst" to change the accent. Components use logical properties, so dir="rtl" just works — see the Persian page.

<html lang="en" data-theme="light" data-accent="emerald">

Copy the source instead (shadcn)

Every component is also a shadcn registry item. The CLI copies its source (and the shared base) into components/pixelbits, so you own and can edit the code.

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/button.json

@import "tailwindcss";
@import "../components/pixelbits/pixelbits.css";

Fonts

The kit reads two CSS variables, --pb-font-sans and --pb-font-mono; without them the system font is used. Self-host your fonts (for example with next/font/local) and point the variables at them:

:root {
  --pb-font-sans: var(--font-geist-sans), system-ui, sans-serif;
  --pb-font-mono: var(--font-geist-mono), ui-monospace, monospace;
}