Sort UI Design System

A coded design system based on the Sort UI Kit — Figma components translated into production-ready Next.js components, documented in Storybook.

npm package: @maxsteinwender/sort-ui

Install

npm install @maxsteinwender/sort-ui

Usage:

// 1. Import styles once in your app root (e.g. layout.tsx, _app.tsx, main.tsx)
import '@maxsteinwender/sort-ui/styles.css'

// 2. Import components
import { Button, Avatar, StatusBadge } from '@maxsteinwender/sort-ui'

Next.js with Tailwind (optional): extend your Tailwind config with Sort UI tokens:

// tailwind.config.js
import sortUIPreset from '@maxsteinwender/sort-ui/tailwind-preset'

export default {
  presets: [sortUIPreset],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@maxsteinwender/sort-ui/dist/**/*.js',
  ],
}

Overview

| | | |---|---| | Components | 106 UI components across 26 categories | | Stories | 93 interactive Storybook stories + 10 documentation pages | | Themes | 4 themes (2 color schemes x light/dark) | | Source | Sort UI Kit 1.3 (Figma) | | Storybook | Live Documentation |

Tech Stack

• Framework: Next.js 16 (App Router), TypeScript
• Styling: Tailwind CSS v3 + CSS custom properties (design tokens)
• Components: shadcn/ui (restyled with Sort UI tokens)
• Icons: Remix Icons
• Documentation: Storybook 10
• Charts: Recharts
• Rich Text: Lexical Editor

Quick Start

# Clone & install
git clone <repo-url> sort-ui-design-system
cd sort-ui-design-system
npm install

# Start Storybook (main entry point)
npm run storybook

Open http://localhost:6006 to browse all components.

Theme System

Sort UI supports 4 themes built on two color schemes:

| Theme | Base | Accent | Mode | |-------|------|--------|------| | Theme 1 Light | Zinc | Blue | light | | Theme 1 Dark | Zinc | Blue | dark | | Theme 2 Light | Neutral | Orange | theme-2 | | Theme 2 Dark | Neutral | Orange | theme-2-dark |

Themes are applied via CSS classes on the root element. Switch between them in Storybook using the theme toolbar.

Component Categories

| Category | Components | |----------|-----------| | Actions | Button, ButtonGroup, LinkButton, ControlButton, FilterButton, SocialButton | | Avatar | Avatar, AvatarGroup, AvatarButton, AvatarUpload | | Badge | Badge, StatusBadge, Chip, Label | | Charts | LineChart, BarChart, DonutChart, PieChart | | Checkbox | Checkbox, CheckboxWithText, CheckboxList, CheckboxCard | | Date Picker | DatePicker (Calendar, Range, Popover compositions) | | Feedback | Tooltip, InlineTips, EmptyState, Divider | | File Upload | FileUploadArea, FileUploadCard, FileUpload (composition) | | Forms | InputField, InputButton, InputCaption, TextAreaField, SelectInput | | Grid Table | GridTableHeaderItem, GridTableSlotItem, GridTableRow | | Navigation | Breadcrumb, Paginator, DropdownMenu, Sidebar, SidebarCard | | Progress | ProgressBar, RadialProgressBar | | Radio | RadioButton, RadioButtonWithText, RadioButtonList, RadioButtonCard | | Selection | ToggleGroup, SelectMenu, SelectMenuItem | | Slider | Slider, SliderRange, DataRangeSlider, SliderInput, SliderRangeInput | | Stepper | HorizontalStepper, VerticalStepper, StepperIcon, StepperNumber | | Switch | Switch, SwitchWithText, SwitchList | | Table | TableHeaderItem, TableItem, TableRowSort, TablePagination, TableSkeletonRow | | Tabs | TabItem, TabList, UnderlineTabItem, UnderlineTabs | | Code | CodeBlock, MarkdownEditor | | Layout | Userbar, SidebarMenuItem, AccordionItem |

Project Structure

sort-ui-design-system/
├── src/
│   ├── components/
│   │   └── ui/              # 106 restyled shadcn/ui components
│   ├── stories/             # 93 Storybook stories + 10 MDX docs
│   ├── tokens/              # Figma token exports (JSON)
│   └── app/                 # Next.js app (redirects to Storybook)
├── .storybook/              # Storybook configuration
├── features/                # Component specs (PROJ-1 to PROJ-85)
├── docs/
│   ├── PRD.md               # Product vision
│   └── COMPONENT-PATTERNS.md # Token & code patterns reference
└── public/
    ├── fonts/               # Redaction font files
    ├── icons/               # Brand & file type icons
    └── userpics/            # Demo avatar images

Scripts

npm run storybook        # Start Storybook (port 6006)
npm run build-storybook  # Build static Storybook
npm run dev              # Next.js dev server
npm run build            # Next.js production build
npm run lint             # ESLint

Design Tokens

Tokens are exported from Figma and converted to CSS custom properties. The token layer maps Sort UI's design decisions to Tailwind utility classes:

• Colors: Semantic tokens (background, foreground, primary, muted, etc.)
• Shadows: shadow-default, shadow-card, shadow-focus, shadow-popover
• Typography: Geist (sans) + Geist Mono + Redaction (display)
• Spacing & Radius: Consistent scale via Tailwind config

See docs/COMPONENT-PATTERNS.md for the complete token mapping reference.

Sort UI Ecosystem

This coded design system is one part of the Sort UI ecosystem:

• Figma UI Kit — Sort UI 1.3 — Design source of truth
• Coded Design System — This repo — Production-ready components
• Framer Kit — Sort UI Framer — No-code website builder components

Credits

• Sort UI Kit by sortui.company — The Figma design system this project is based on
• shadcn/ui — Component primitives
• Remix Icons — Icon library

License

Private project. Sort UI Kit license applies to design tokens and visual design.