Package Exports
- @devalok/shilp-sutra/composed
- @devalok/shilp-sutra/composed/avatar-group
- @devalok/shilp-sutra/composed/command-palette
- @devalok/shilp-sutra/composed/content-card
- @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/status-badge
- @devalok/shilp-sutra/fonts/GoogleSans-Italic-Variable.ttf
- @devalok/shilp-sutra/fonts/GoogleSans-Variable.ttf
- @devalok/shilp-sutra/fonts/Ranade-Variable.ttf
- @devalok/shilp-sutra/fonts/Ranade-VariableItalic.ttf
- @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/checkbox
- @devalok/shilp-sutra/ui/chip
- @devalok/shilp-sutra/ui/code
- @devalok/shilp-sutra/ui/collapsible
- @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/visually-hidden
Readme
@devalok/shilp-sutra
Devalok Design System -- tokens, components, and patterns for React & Next.js.
For full documentation, setup guides, and architecture details, see the monorepo README.
Install
pnpm add @devalok/shilp-sutra framer-motion
# Only if you render a <Toaster />:
pnpm add sonnerUpgrading from < 0.37? 0.37 is a Tailwind 4 CSS-first release — the setup has changed. Read MIGRATION.md.
Quick Start
/* app/globals.css */
@import "tailwindcss";
@import "@devalok/shilp-sutra/css";// next.config.ts
export default {
transpilePackages: ['@devalok/shilp-sutra', '@devalok/shilp-sutra-brand'],
}// Any component
import { Button } from '@devalok/shilp-sutra/ui/button'No tailwind.config.ts required from us. Your own plugins or content globs go in globals.css via TW4 directives (@plugin, @source, @theme).
Peer Dependencies
Required
| Package | Version | Why |
|---|---|---|
react |
^18 || ^19 |
|
react-dom |
^18 || ^19 |
|
tailwindcss |
^4.0.0 |
We ship TW4 @theme CSS; TW3 is not supported |
framer-motion |
^12.0.0 |
Shared-state motion contexts must be single-copy |
Optional
Install only what you use:
| Feature | Packages |
|---|---|
Toasts (./ui/toaster, ./ui/toast) |
sonner |
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 |
DataTable (./ui/data-table) |
@tanstack/react-table, @tanstack/react-virtual |
| Icons | @tabler/icons-react |
Date components (./composed/date-picker) |
date-fns |
OTP Input (./ui/input-otp) |
input-otp |
| Markdown rendering | react-markdown, remark-gfm |
PDF preview (./composed/file-preview) |
react-pdf, react-zoom-pan-pinch |
Links
- Storybook -- interactive component docs
- Monorepo README -- full docs, architecture, component list
- Changelog
- Migration Guide
License
MIT -- Copyright 2026 Devalok Design & Strategy Studios