JSPM

  • Created
  • Published
  • Downloads 288
  • Score
    100M100P100Q105071F
  • License MIT

Devalok Design System — tokens, components, and patterns for Next.js

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.

npm Storybook License: MIT

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 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', '@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

License

MIT -- Copyright 2026 Devalok Design & Strategy Studios