Commit Design System — Next.js + Tailwind 4 UI Kit with Tokens, 19 Components, App Patterns & Docs Site

This is a design system. You're buying the source code for a UI kit and its documentation site: design tokens, React components and app patterns you copy into your own Next.js project. It has the look of the Developer Portfolio template, packaged for building dashboards, developer tools and product UI. The people and projects in the examples are fictional.

What's inside

• Design tokens in one JSON file: colour roles for two themes, a fluid type scale, spacing, radius (including control, popover and item radii), shadows, easing curves, durations and layout. One command turns them into Tailwind 4 theme variables, so bg-paper, text-ink, rounded-control and ease-out work as utilities
• 19 documented components: button, icon button, dropdown menu, toolbar, label, tag and chip, status dot, card grid, masked heading, code block, text field / text area / select, input variants (icon, unit, character count, show-password, search with shortcut), checkbox, switch and segmented control, checkbox group with select-all, radio group (list or cards), number stepper, date picker with calendar, toasts, theme toggle, plus keyboard keys, avatar and live clock
• 5 app patterns: sign in, settings, list with toolbar, checkout and scheduling, fully interactive and ready to copy
• A documentation site you can deploy for your team: foundations, a page per component with live examples, props tables, do/don't guidance and accessibility notes, plus a full token reference

Design

• Two cold, high-contrast themes (Mono with an electric-blue accent, Dark with acid lime), switched by one attribute
• Geist for display and body, Geist Mono as a second voice for labels and metadata
• One ease-out curve for everything that enters; menus pop from their trigger and numbers roll as they change

Accessibility

• WCAG contrast ratios computed from the tokens and shown in the docs; text pairs pass AA in both themes
• Menus, toolbars, radio groups, the stepper and the calendar follow WAI-ARIA keyboard patterns (arrow keys, Home/End, Escape returns focus)
• Real buttons, links and labelled inputs; visible focus everywhere; motion switches off for reduced motion

Easy to make yours

• Edit the JSON tokens and regenerate the CSS; components only use roles, so a new palette or corner style applies everywhere
• Every component is one typed file with no extra runtime beyond Framer Motion and Lucide icons
• The docs site ships with the source: rename it and deploy it as your own reference

Stack: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, Framer Motion, Lucide icons.