@nestjs-dash/design-system

A shadcn/ui + Tailwind CSS design system, plus the server-driven UI (SDUI) renderer that turns the JSON SchemaNode/ChartSpec trees produced by @nestjs-dash/core into React. This is the client-side rendering half of NestJS Dash's admin shell — @nestjs-dash/nestjs uses it for the built-in React SSR shell, but the components/renderer are usable standalone too. It depends only on @nestjs-dash/support for shared types — no coupling to @nestjs-dash/core's server-side builders beyond the JSON shapes they agree on.

Install

pnpm add @nestjs-dash/design-system react react-dom

react/react-dom ^19.0.0 are peer dependencies.

Subpath exports

This package publishes several entry points, not just the package root:

| Import | Contents | | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | @nestjs-dash/design-system | Top-level renderer entry (renderSchemaNode, SchemaForm, DataTable, ChartWidget, ThemeToggle, …) | | @nestjs-dash/design-system/ui | Shared Tailwind utility class-string tokens (ui, btnClass) for Nest SSR templates, without the SDUI renderer | | @nestjs-dash/design-system/components/* | Individual components, importable one at a time | | @nestjs-dash/design-system/hooks/* | React hooks | | @nestjs-dash/design-system/lib/* | Utilities, including cn (class-name merge) | | @nestjs-dash/design-system/nestjs-dash.css (alias ./styles.css) | Compiled Tailwind stylesheet — import once at your app's root |

Usage

import { renderSchemaNode } from '@nestjs-dash/design-system';
import '@nestjs-dash/design-system/nestjs-dash.css';

// `node` is a `SchemaNode` (from @nestjs-dash/support) produced by an
// @nestjs-dash/core form/table builder and passed down as SSR props.
function Field({ node }: { node: SchemaNode }) {
  return renderSchemaNode(node);
}

Notable renderers: SchemaForm (form field trees), DataTable (resource tables), ChartWidget (renders a ChartSpec from @nestjs-dash/support using Recharts), upload/repeater/rich-editor fields, and ThemeToggle for light/dark mode.

Docs: Design system.

License

MIT