A lightweight, accessible React design system with zero-runtime CSS. Ship beautiful interfaces without the performance overhead.
Everything you need to build accessible, performant user interfaces.
CSS Modules with CSS custom properties. No JavaScript overhead at runtime. Your bundle stays lean and fast.
WAI-ARIA compliant with keyboard navigation. Built-in focus management and screen reader support.
Full type definitions for every component. IntelliSense-powered development experience out of the box.
Form controls, feedback, data display, layout, and navigation. Everything you need to build complete applications.
Dark mode by default. Switch with a single data-theme attribute. Tokens adapt automatically.
Import only what you need. ESM exports ensure unused components are eliminated from your bundle.
Install from npm and start building right away.
Add stoked-ds to your project using your preferred package manager.
npm install stoked-dsImport components and styles, then use them in your React app.
import { Button, Input } from 'stoked-ds';
import 'stoked-ds/dist/index.css';
function App() {
return (
<div data-theme="dark">
<Input placeholder="Enter your name" />
<Button variant="solid">Submit</Button>
</div>
);
}Import CSS tokens to use the same variables in your custom styles.
@import 'stoked-ds/dist/tokens/index.css';
.my-card {
background: var(--stoked-color-surface);
border-radius: var(--stoked-radius-xl);
box-shadow: var(--stoked-shadow-md);
padding: var(--stoked-spacing-6);
}Organized by category. Every component is fully typed, accessible, and themeable.
Solid, outline, ghost, and link variants with multiple sizes
Text input with label, helper text, and error states
Input with search icon and Enter-to-search action
Single or multiple selection with controlled state
Single selection with RadioGroup container
Dropdown selection with custom styling
Toggle on/off with accessible labeling
Toggle group for mutually exclusive options
Informational messages with variant support
Dialog overlays with focus trap and backdrop
Temporary notification popups with auto-dismiss
Circular loading indicator with CSS keyframes
Progress bar with animated stripes and indeterminate
Content placeholder with pulse and wave animation
Contextual information on hover or focus
Status indicators and labels with color variants
Removable labels with solid and outline variants
User images with initials fallback and sizes
Content containers with header and footer slots
Metric card with icon, value, trend, and status
Collapsible content sections with smooth animation
Tabbed navigation with keyboard support
Data tables with responsive styling
Collapsible navigation with sections and items
Layout wrapper with sidebar, header, and content area
Hierarchical navigation trail with custom separators
Page navigation with smart ellipsis handling
Optional adapters that connect popular React libraries with stoked-ds styling and tokens. Import only what you need.
Form and FormField wrappers that connect RHF Controller with stoked-ds Input, Select, Checkbox, Radio, and Switch.
import { Form, FormField } from 'stoked-ds/integrations/react-hook-form';
<FormField control={form.control} name="email"
render={({ field, error }) => (
<Input {...field} label="Email" error={error?.message} />
)}
/>DataTable component with sorting, pagination, loading states, and row click using stoked-ds Table primitives.
DatePicker and DateRangePicker with calendar popup, min/max dates, and stoked-ds theming.
AdvancedSelect with search, multi-select, creatable, and async loading styled with stoked-ds tokens.
Themed LineChart, BarChart, AreaChart, and PieChart pre-configured with stoked-ds design tokens.
Styled node components using Card, Badge, and Button for building workflow editors and flow diagrams.
CSS custom properties for colors, spacing, typography, and more. Use them in your own styles for a cohesive look.
--stoked-duration-fast: 100ms
--stoked-duration-normal: 200ms
--stoked-duration-slow: 300ms
--stoked-easing-default: cubic-bezier(0.4, 0, 0.2, 1)
/* Import all tokens */
@import 'stoked-ds/dist/tokens/index.css';
/* Or import individual token files */
@import 'stoked-ds/dist/tokens/colors.css';
@import 'stoked-ds/dist/tokens/spacing.css';
@import 'stoked-ds/dist/tokens/typography.css';