Skip to main content

​
Welcome to Soft UI

Soft UI is a comprehensive design system for React and Next.js applications, providing 70+ production-ready components built on Base UI primitives with Tailwind v4.

70+ Components

From buttons to complex data tables, dialogs, menus, forms, and navigation components

Base UI Primitives

Built on top of Base UI for accessibility and behavior

Design Tokens

Theme-aware color system with live theme and base color switching

TypeScript First

Fully typed components with IntelliSense support

Tailwind v4

Powered by the latest Tailwind CSS for modern styling

Subpath Imports

Import only what you need with component-level subpaths

​
Architecture

Soft UI is a monorepo with three core packages:
  • @soft-ui/tokens - Design tokens, CSS entrypoints, and theme initialization
  • @soft-ui/icons - Swappable icon adapter with Remix Icons as default implementation
  • @soft-ui/react - 70+ UI components with subpath imports

​
Design System Features

1

Token-Driven Design

Colors, spacing, typography, and border radii are all controlled by design tokens that map to Tailwind scales
2

Live Theme Switching

Switch between 21 theme colors and 9 base colors using data-theme-color and data-base-color attributes
3

Color Schemes

Toggle between mono (neutral primary actions) and color (themed primary actions) schemes
4

Light & Dark Modes

Built-in support for light and dark modes with automatic system preference detection

​
Typography

Soft UI uses Inter Variable font with carefully chosen type scales:
SizeFont SizeLine Height
xs10px10px
s12px16px
m14px20px
l16px22px
xl18px24px
2xl20px28px
3xl24px32px
Font weights: default (400), medium (480), semibold (550)

​
Component Highlights

Soft UI includes components for every use case:

Buttons

Button, IconButton, ToggleButton, ButtonGroup

Forms

Input, Textarea, Select, Checkbox, Radio, Switch, Slider, NumberField, FileUpload

Navigation

Menu, Tabs, Breadcrumbs, Pagination, CommandPalette

Overlays

Dialog, Popover, Tooltip, ContextMenu, AlertDialog

Data Display

Table, Avatar, AvatarGroup, Badge, Chip, Meter, Progress

Feedback

Toast, Banner, InlineNotification, EmptyState

​
Why Soft UI?

Soft UI takes the best parts of shadcn/ui’s component philosophy and combines it with Base UI’s accessible primitives, creating a cohesive design system that’s both beautiful and functional.
Key advantages:
  • Package-first approach - Install via npm, not copy-paste
  • Base UI primitives - Accessibility and behavior handled for you
  • Design tokens - Consistent theming across your entire application
  • Subpath imports - Tree-shakeable imports for optimal bundle size
  • TypeScript - Full type safety out of the box
  • Tailwind v4 - Modern CSS with future-proof tooling

​
Next Steps

Installation

Set up Soft UI in your React or Next.js project

Quick Start

Build your first component in minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us