Package Exports

@devalok/shilp-sutra
@devalok/shilp-sutra/composed
@devalok/shilp-sutra/composed/avatar-group
@devalok/shilp-sutra/composed/command-palette
@devalok/shilp-sutra/composed/confirm-dialog
@devalok/shilp-sutra/composed/content-card
@devalok/shilp-sutra/composed/date-picker
@devalok/shilp-sutra/composed/empty-state
@devalok/shilp-sutra/composed/error-boundary
@devalok/shilp-sutra/composed/global-loading
@devalok/shilp-sutra/composed/loading-skeleton
@devalok/shilp-sutra/composed/member-picker
@devalok/shilp-sutra/composed/page-header
@devalok/shilp-sutra/composed/page-skeletons
@devalok/shilp-sutra/composed/priority-indicator
@devalok/shilp-sutra/composed/rich-text-editor
@devalok/shilp-sutra/composed/schedule-view
@devalok/shilp-sutra/composed/simple-tooltip
@devalok/shilp-sutra/composed/status-badge
@devalok/shilp-sutra/fonts/Inter-Italic-Variable.woff2
@devalok/shilp-sutra/fonts/Inter-Variable.woff2
@devalok/shilp-sutra/fonts/Ranade-Variable.woff2
@devalok/shilp-sutra/fonts/Ranade-VariableItalic.woff2
@devalok/shilp-sutra/hooks
@devalok/shilp-sutra/hooks/use-color-mode
@devalok/shilp-sutra/hooks/use-mobile
@devalok/shilp-sutra/hooks/use-toast
@devalok/shilp-sutra/shell
@devalok/shilp-sutra/shell/app-command-palette
@devalok/shilp-sutra/shell/bottom-navbar
@devalok/shilp-sutra/shell/link-context
@devalok/shilp-sutra/shell/notification-center
@devalok/shilp-sutra/shell/notification-preferences
@devalok/shilp-sutra/shell/sidebar
@devalok/shilp-sutra/shell/top-bar
@devalok/shilp-sutra/tailwind
@devalok/shilp-sutra/tokens
@devalok/shilp-sutra/ui
@devalok/shilp-sutra/ui/accordion
@devalok/shilp-sutra/ui/alert
@devalok/shilp-sutra/ui/alert-dialog
@devalok/shilp-sutra/ui/aspect-ratio
@devalok/shilp-sutra/ui/autocomplete
@devalok/shilp-sutra/ui/avatar
@devalok/shilp-sutra/ui/badge
@devalok/shilp-sutra/ui/banner
@devalok/shilp-sutra/ui/breadcrumb
@devalok/shilp-sutra/ui/button
@devalok/shilp-sutra/ui/button-group
@devalok/shilp-sutra/ui/card
@devalok/shilp-sutra/ui/charts
@devalok/shilp-sutra/ui/checkbox
@devalok/shilp-sutra/ui/chip
@devalok/shilp-sutra/ui/code
@devalok/shilp-sutra/ui/collapsible
@devalok/shilp-sutra/ui/color-input
@devalok/shilp-sutra/ui/combobox
@devalok/shilp-sutra/ui/container
@devalok/shilp-sutra/ui/context-menu
@devalok/shilp-sutra/ui/data-table
@devalok/shilp-sutra/ui/data-table-toolbar
@devalok/shilp-sutra/ui/dialog
@devalok/shilp-sutra/ui/dropdown-menu
@devalok/shilp-sutra/ui/file-upload
@devalok/shilp-sutra/ui/form
@devalok/shilp-sutra/ui/hover-card
@devalok/shilp-sutra/ui/icon-button
@devalok/shilp-sutra/ui/input
@devalok/shilp-sutra/ui/input-otp
@devalok/shilp-sutra/ui/label
@devalok/shilp-sutra/ui/link
@devalok/shilp-sutra/ui/menubar
@devalok/shilp-sutra/ui/navigation-menu
@devalok/shilp-sutra/ui/number-input
@devalok/shilp-sutra/ui/pagination
@devalok/shilp-sutra/ui/popover
@devalok/shilp-sutra/ui/progress
@devalok/shilp-sutra/ui/radio
@devalok/shilp-sutra/ui/search-input
@devalok/shilp-sutra/ui/segmented-control
@devalok/shilp-sutra/ui/select
@devalok/shilp-sutra/ui/separator
@devalok/shilp-sutra/ui/sheet
@devalok/shilp-sutra/ui/sidebar
@devalok/shilp-sutra/ui/skeleton
@devalok/shilp-sutra/ui/slider
@devalok/shilp-sutra/ui/spinner
@devalok/shilp-sutra/ui/stack
@devalok/shilp-sutra/ui/stat-card
@devalok/shilp-sutra/ui/stepper
@devalok/shilp-sutra/ui/switch
@devalok/shilp-sutra/ui/table
@devalok/shilp-sutra/ui/tabs
@devalok/shilp-sutra/ui/text
@devalok/shilp-sutra/ui/textarea
@devalok/shilp-sutra/ui/toast
@devalok/shilp-sutra/ui/toaster
@devalok/shilp-sutra/ui/toggle
@devalok/shilp-sutra/ui/toggle-group
@devalok/shilp-sutra/ui/tooltip
@devalok/shilp-sutra/ui/transitions
@devalok/shilp-sutra/ui/tree-view
@devalok/shilp-sutra/ui/visually-hidden
@devalok/shilp-sutra/utils

Readme

@devalok/shilp-sutra

Devalok Design System -- tokens, components, and patterns for React & Next.js.

Quick Setup

1. Install

pnpm add @devalok/shilp-sutra

2. Add Tailwind Preset

// tailwind.config.ts
import shilpSutra from '@devalok/shilp-sutra/tailwind'

export default {
  presets: [shilpSutra],
  content: [
    './app/**/*.{ts,tsx}',
    './node_modules/@devalok/shilp-sutra/dist/**/*.js',
  ],
}

3. Import Tokens

// app/layout.tsx (Next.js) or main entry point
import '@devalok/shilp-sutra/tokens'
import './globals.css'

Done. Start using components.

Import Patterns

Per-component import (recommended)

Best for tree-shaking, Server Components, and fast builds:

import { Button } from '@devalok/shilp-sutra/ui/button'
import { Dialog } from '@devalok/shilp-sutra/ui/dialog'
import { DatePicker } from '@devalok/shilp-sutra/composed/date-picker'
import { TopBar } from '@devalok/shilp-sutra/shell/top-bar'

Barrel import

Convenient for client components that use many primitives:

import { Button, Dialog, Input, Badge } from '@devalok/shilp-sutra/ui'
import { PageHeader, DatePicker } from '@devalok/shilp-sutra/composed'
import { AppSidebar, TopBar } from '@devalok/shilp-sutra/shell'

Root import

Shorthand for UI components only:

import { Button, Input } from '@devalok/shilp-sutra'

Mental Model

The design system is organized into three tiers:

Layer	Import	What it contains
ui	`@devalok/shilp-sutra/ui`	60+ atomic primitives -- buttons, inputs, dialogs, cards, tables, badges, charts, navigation menus
composed	`@devalok/shilp-sutra/composed`	14 multi-component patterns -- date picker, rich text editor, command palette, page header, skeletons
shell	`@devalok/shilp-sutra/shell`	7 app-level layout components -- sidebar, top bar, bottom navbar, notification center, command palette

Additional exports:

Import	Contents
`@devalok/shilp-sutra/tokens`	CSS custom properties (primitives, semantic, typography)
`@devalok/shilp-sutra/tailwind`	Tailwind CSS preset with all design tokens
`@devalok/shilp-sutra/hooks`	`useToast`, `useColorMode`, `useIsMobile`
`@devalok/shilp-sutra/fonts/*`	Inter and Ranade variable fonts (WOFF2)

Peer Dependencies

Required

Package	Version
`react`	`^18 \|\| ^19`
`react-dom`	`^18 \|\| ^19`

Optional

Install only what you use:

Feature	Packages
Charts (`./ui/charts`)	`d3-array`, `d3-axis`, `d3-format`, `d3-interpolate`, `d3-scale`, `d3-selection`, `d3-shape`, `d3-time-format`, `d3-transition`
Rich Text Editor (`./composed/rich-text-editor`)	`@tiptap/react`, `@tiptap/starter-kit`, `@tiptap/extension-placeholder`
DataTable (`./ui/data-table`)	`@tanstack/react-table`, `@tanstack/react-virtual`
Icons (various components)	`@tabler/icons-react`
Date components (`./composed/date-picker`)	`date-fns`
OTP Input (`./ui/input-otp`)	`input-otp`
Markdown rendering	`react-markdown`

Example -- install only charts deps:

pnpm add d3-array d3-axis d3-format d3-interpolate d3-scale d3-selection d3-shape d3-time-format d3-transition

Server-Safe Components

These components work in React Server Components when imported via their per-component path. They do not include "use client" directives:

ui

Component	Import
Text	`@devalok/shilp-sutra/ui/text`
Skeleton	`@devalok/shilp-sutra/ui/skeleton`
Spinner	`@devalok/shilp-sutra/ui/spinner`
Stack	`@devalok/shilp-sutra/ui/stack`
Container	`@devalok/shilp-sutra/ui/container`
Table	`@devalok/shilp-sutra/ui/table`
Code	`@devalok/shilp-sutra/ui/code`
VisuallyHidden	`@devalok/shilp-sutra/ui/visually-hidden`

composed

Component	Import
ContentCard	`@devalok/shilp-sutra/composed/content-card`
EmptyState	`@devalok/shilp-sutra/composed/empty-state`
PageHeader	`@devalok/shilp-sutra/composed/page-header`
LoadingSkeleton	`@devalok/shilp-sutra/composed/loading-skeleton`
PageSkeletons	`@devalok/shilp-sutra/composed/page-skeletons`
PriorityIndicator	`@devalok/shilp-sutra/composed/priority-indicator`
StatusBadge	`@devalok/shilp-sutra/composed/status-badge`

All other components require client-side React and include "use client".

Dark Mode

The design system uses CSS custom properties with a .dark class toggle. All semantic tokens have dark mode overrides built in.

Setup

Add the .dark class to your <html> or a parent element:

<html class="dark">

Next.js with next-themes

// app/layout.tsx
import { ThemeProvider } from 'next-themes'

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Programmatic toggle

import { useColorMode } from '@devalok/shilp-sutra/hooks'

function ThemeToggle() {
  const { mode, toggle } = useColorMode()
  return <button onClick={toggle}>{mode === 'dark' ? 'Light' : 'Dark'}</button>
}

TypeScript

Full TypeScript support works out of the box. No special tsconfig.json settings required.

All component props are exported as named types:

import { type ButtonProps } from '@devalok/shilp-sutra/ui/button'
import { type DatePickerProps } from '@devalok/shilp-sutra/composed/date-picker'

Token Architecture

Three-tier CSS custom property system:

Primitives (primitives.css) -- Raw palette values (50-950 scales). Never used directly in components.
Semantic (semantic.css) -- Intent-based tokens (--color-interactive, --color-text-primary). Includes dark mode via .dark class.
Typography (typography.css) -- Font-face declarations, type scale (T1-T7, B1-B8, L1-L6, P1-P7).

JSPM