@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.

Want to brand it? Skip the CSS cookbook — open the Themer. Pick an archetype (Linear / Stripe / Apple / Material / Notion / Vercel / Devalok), or paste your brand hex, or take a 5-question wizard. Lands you at a result page with install commands + a CSS block to paste.

Install

pnpm add @devalok/shilp-sutra framer-motion
# Only if you render a <Toaster />:
pnpm add sonner

Upgrading 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'],
}

// 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