stream/ui

Neo-brutalist React components with hard edges: 2px ink borders, hard offset shadows, flat lime and pink brights, and every interactive state styled.

This repo holds two things:

• @streamuilib/react, the component library published to npm
• The docs site, a Next.js app that showcases and documents every component, page section, icon, and experiment, and uses the package itself

bun add @streamuilib/react

Docs and live examples: streamui.org. Setup and usage for the package are in packages/react/README.md.

What's in the library

Part	What you get
Components	Button, Badge, Card, Alert, Input, Textarea, Select, Checkbox, Radio Group, Switch, Slider, Tabs, Accordion, Dialog, Tooltip, Progress, Battery, Skeleton, Avatar, Audio Player, Track List, Equalizer, and Animated Icon, each in two designs: Classic (hard borders and offset shadows) and Comic (hand-inked outlines, halftone dots, starbursts, and sound effects). Plus a pure-CSS 3D Cube, solid, lined, or beveled. Keyboard support and focus states included.
Sections	Hero, Features, Pricing, Testimonials, FAQ, and Footer, built from the components. They size themselves with container queries, so they fit a full page or a narrow column.
Icons	The full Lucide set, searchable, with size, stroke, and animation controls. Click an icon to copy its JSX.
Animated icons	Wrap any SVG icon in <AnimatedIcon> to draw, spin, bounce, wiggle, pulse, shake, or pop it on hover, on a loop, or once. Pure CSS, off under reduced motion.
Labs	Interaction experiments that haven't graduated into the library yet.

Install with shadcn

Every component, section, and lab is also a shadcn registry item, so you can copy the source straight into a project that uses shadcn/ui:

# See everything in the registry
bunx shadcn@latest search https://streamui.org/r/registry.json

# Add an item (it brings the theme and anything else it needs)
bunx shadcn@latest add https://streamui.org/r/flappy-hero.json

Or register the namespace once and use short names:

bunx shadcn@latest registry add "@streamui=https://streamui.org/r/{name}.json"
bunx shadcn@latest search @streamui
bunx shadcn@latest add @streamui/flappy-hero

npx works the same as bunx.

Files land in streamui/ folders (components/ui/streamui/button.tsx, lib/streamui/cn.ts, ...), beside your own shadcn/ui components, never over them. theme adds the tokens and utilities; fonts adds Archivo Black, Space Grotesk, and Space Mono. The full catalog is at https://streamui.org/r/registry.json.

The registry is generated from the real sources on every build (bun run registry:build, see scripts/build-registry.ts), and tests/shadcn-registry.test.ts validates it against shadcn's schema.

Getting started

Requires Bun 1.3 or later.

bun install
bun dev

Open http://localhost:3000. bun dev builds the package first, then starts Next.js.

To work on the package and the site together, run the package in watch mode in a second terminal so your edits rebuild automatically:

bun run ui:dev

Configuration

Deployment settings come from environment variables, so nothing personal or deployment-specific is committed to this public repo. All of them are optional; the site builds and runs with none set.

cp .env.example .env.local

Variable	Purpose
NEXT_PUBLIC_SITE_URL	Canonical origin for links, the sitemap, and share images. Defaults to https://streamui.org.
FUNDING_GITHUB_SPONSORS_URL	GitHub Sponsors profile shown on /sponsor, e.g. https://github.com/sponsors/Sohan-Rout
FUNDING_RAZORPAY_QR_URL	Image URL of a Razorpay UPI QR code, shown on /sponsor for scanning
FUNDING_RAZORPAY_URL	Razorpay payment link, shown as a button for people paying on their phone
TEMPLATE_SAAS_CHECKOUT_URL	Store checkout link for the SaaS Launch template. Unset shows "Coming soon" instead of Buy.
TEMPLATE_AGENCY_CHECKOUT_URL	Store checkout link for the Studio template. Unset shows "Coming soon" instead of Buy.
TEMPLATE_AGENCY_DEMO_URL	Where Studio's live demo is deployed, framed by its Live preview page. Unset makes that page 404.

Values are validated at build time: a malformed or non-https link fails the build with a message naming the variable. In production, set them in your host's dashboard (on Vercel: Project Settings → Environment Variables) and redeploy. .env* files are gitignored, and a test fails if one is ever committed or if a credential appears in any tracked file.

Scripts

Script	What it does
bun dev	Builds the package, then starts the dev server
bun run build	Builds the package, then the production site
bun start	Serves the production build
bun run lint	Runs ESLint
bun run typecheck	Type-checks the site and the package
bun run test	Builds the package, then runs every test
bun run check	Lint, typecheck, test, and build: everything CI runs
bun run ui:build	Builds @streamuilib/react into packages/react/dist
bun run ui:dev	Rebuilds the package on every change

This is the beginning of the README. Read the rest at the original. Read the full README ↗