Retro computer / tactile skeuomorphic React component library. Pixel fonts, CRT vibes, matte arcade buttons, leather-textured toolbars.
Around 22 components plus design tokens, built for small self-hosted dashboards. Designed to be dropped into a project as a git submodule and linked as an npm workspace.
git submodule add https://github.com/buurro/ui.git packages/ui
git submodule update --init --recursive # for a fresh clone// package.json (repo root)
{ "workspaces": ["frontend", "packages/ui"] }
// frontend/package.json
{ "dependencies": { "@buurro/retro-ui": "0.1.0" } }// Once per app: design tokens + base element styles (body, headings, inputs, links)
import "@buurro/retro-ui/styles.css";
// Optional: load Press Start 2P / Space Mono / VT323 from Google Fonts
import "@buurro/retro-ui/fonts.css";
import { Button, Card, PageHeader, useDarkMode } from "@buurro/retro-ui";Component styles are bundled with the components themselves - importing a
component pulls in its CSS. All class names are prefixed rui-, all themable
values are CSS custom properties (--color-*, --font-*, --shadow-*)
defined in src/styles/tokens.css.
Everything keys off data-theme="dark" | "light" on <html>. The useDarkMode
hook manages it (localStorage persistence + OS preference fallback). To avoid a
flash of the wrong theme, replicate the attribute logic in a blocking inline
script in your index.html.
Text on colour has its own tokens, and they are what keeps the library at
WCAG AA in both themes: --color-primary is the brand (glows, rings, the
wordmark), --color-primary-fill / --color-on-primary are a labelled
control, --color-link is inline text, and --color-success-text /
--color-warning-text / --color-danger-text / --color-info-text are the
semantic colours as text (the bright --color-accent-* values are fills
and indicators). If you override one, measure the pair it sits on.
Overriding the look = overriding tokens:
:root {
--color-primary: #1d4aff; /* blue instead of orange */
}npm run storybook # component workbench at localhost:6006
npm run typecheck
npm run build # dist/ bundle + type declarations (for publishing)From a consuming repo's root: npm run storybook.
Button, Badge, Card/CardGrid, Input/Select/FormField, SegmentedControl,
PageHeader, Hero, DisplayHeading/TerminalText, StatCard, SummaryBar,
ProgressBar, Legend, Alert, LoadingDots, EmptyState, LoadingPlaceholder,
Skeleton, Timeline/TimelineGroup/TimelineCard, Board/BoardRow/BoardCell,
Modal/ModalActions, TopBar, ThemeToggle, LastUpdated,
AppShell/Sidebar/SidebarItem/SidebarBadge/SidebarDivider/SidebarStatus,
TabBar/TabBarItem, and a small set of nav icons (IconGrid, IconTv, ...).
Plus the useDarkMode and useSidebarCollapsed hooks and the cx class-name
helper.