Shelf — Design System

A professional, accessible component library for React.

100 components · 9 categories · MIT licensed

Shelf is a production-quality UI kit built on Base UI primitives and styled with Tailwind CSS. It ships with dark and light themes, polished motion, and a full documentation site with live, interactive examples.

Highlights

• 14+ accessible components — Button, Badge, Card, Input, Tabs, Switch, Checkbox, Select, Avatar, Skeleton, Progress, Dialog, Tooltip, Accordion, Separator, Table
• Dark + light themes with CSS variables and a persisted theme toggle
• Base UI primitives — robust keyboard navigation and ARIA out of the box
• Interactive playground and live component previews in the docs
• Motion — tasteful transitions via motion (Framer Motion)

Tech

• Next.js 16 (App Router) + React 19 + TypeScript
• Tailwind CSS 4 + shadcn/ui conventions
• Base UI (headless primitives)
• Lenis smooth scrolling on marketing pages

Getting started

npm install
npm run dev

Then open http://localhost:3000.

Pages

Route	Purpose
/	Marketing landing page
/docs	Documentation home
/docs/getting-started	Installation & usage guide
/docs/components	Component index
/docs/components/[slug]	Per-component docs with live demos
/playground	Interactive component playground

Scripts

npm run dev      # start the dev server
npm run build    # production build
npm run start    # serve the production build
npm run lint     # run ESLint