Mini Design System Builder

An interactive playground for building, previewing and customizing UI components in real time. Pick a component, fine-tune its options — tone, size, shape, radius, weight, states — preview every semantic variant live, switch themes, and copy the generated JSX.

Built with React Router 8 (SSR), React 19, TypeScript and Tailwind CSS v4.

Available live -> https://mini-design-system-builder.vercel.app

Screenshots

Home — browse the full component library

Component builder — live options, variant preview and copyable JSX

Themeable — the same builder in the Ocean dark theme

Docs — every control, grouped and mapped per component

Features

• 🧩 20 components across five groups — Actions, Forms, Data Display, Feedback and Navigation (Button, Input, Select, Checkbox, Radio, Switch, Slider, Badge, Avatar, Tag, Card, Tooltip, Alert, Toast, Progress, Spinner, Tabs, Breadcrumb…).
• 🎛️ Live customization — adjust tone, size, shape, radius, font weight, icon position and per-component states through a shared options bar.
• 🌈 8 themes with a theme picker (light, dark and six accented variants), persisted to localStorage.
• 🎨 Semantic variants — every component renders in neutral, success, warning, error and info tones.
• 📋 Live code preview — generated, syntax-highlighted JSX you can copy.
• 🚀 Server-side rendering, HMR and TypeScript throughout.
• ✅ Tested with Vitest + Testing Library, with CI running lint, typecheck, tests and build on every push and PR.

Tech stack

Area	Choice
Framework	React Router 8 (SSR)
UI	React 19
Language	TypeScript
Styling	Tailwind CSS v4
Icons	lucide-react
Testing	Vitest + @testing-library/react
Linting	ESLint 9 (flat config)
CI	GitHub Actions

Getting started

Install the dependencies:

npm install

Start the development server with HMR:

npm run dev

The app runs at http://localhost:3000.

Scripts

Command	Description
npm run dev	Start the dev server (HMR) on port 3000
npm run build	Create a production build
npm start	Serve the production build
npm run typecheck	Generate route types and run tsc
npm run lint	Lint the project with ESLint
npm test	Run the test suite once
npm run test:watch	Run the test suite in watch mode

Project structure

app/
├── components/
│   ├── lib-components/    # The design-system components (Button, Badge, …)
│   └── view-components/   # App UI: sidebar, option bar, code/icon blocks
├── consts/               # Component registry, options, styles, themes, code helpers
├── context/              # Options and theme React contexts
└── routes/               # home, components, docs, about (+ layout)

Testing

Tests focus on the parts of the app that hold real logic:

• consts/component-code — the JSX formatting and tokenizing helpers.
• consts/themes — the theme guard, derived id lists and DOM class toggling.
• consts/component-list — registry integrity (every component has a preview and a renderer).
• lib-components — context-driven rendering (Button, Badge).

npm test

Deployment

Docker

docker build -t mini-design-system-builder .
docker run -p 3000:3000 mini-design-system-builder

The container can run on any Docker-capable platform (AWS ECS, Google Cloud Run, Azure Container Apps, Fly.io, Railway, …).

DIY

The built-in app server is production-ready. Deploy the output of npm run build:

├── package.json
├── package-lock.json
├── build/
│   ├── client/    # Static assets
│   └── server/    # Server-side code

---

Built with ❤️ using React Router.