datum-ui
++ Datum Cloud Design System +
+ + View Documentation + +
-This is a community-maintained example. If you experience a problem, please submit a pull request with a fix. GitHub Issues will be closed.
+
+
-This is a community-maintained example. If you experience a problem, please submit a pull request with a fix. GitHub Issues will be closed.
+
+ Datum Cloud Design System & Component Library +
+ -- 🏎 [Turborepo](https://turborepo.dev) — High-performance build system for Monorepos -- 🚀 [React](https://reactjs.org/) — JavaScript library for user interfaces -- 🛠 [Tsup](https://github.com/egoist/tsup) — TypeScript bundler powered by esbuild -- 📖 [Storybook](https://storybook.js.org/) — UI component environment powered by Vite +--- -As well as a few others tools preconfigured: +## About -- [TypeScript](https://www.typescriptlang.org/) for static type checking -- [ESLint](https://eslint.org/) for code linting -- [Prettier](https://prettier.io) for code formatting -- [Changesets](https://github.com/changesets/changesets) for managing versioning and changelogs -- [GitHub Actions](https://github.com/changesets/action) for fully automated package publishing +Datum UI is Datum Cloud's design system and React component library. It provides themed, composable components built on [shadcn/ui](https://ui.shadcn.com) and [Radix UI](https://www.radix-ui.com) with a Figma-driven design token pipeline. -## Using this example +### Key Features -Run the following command: +- **50+ Components** — Buttons, forms, data tables, dialogs, navigation, and more +- **Compound Form System** — Built on Conform.js and Zod with validation, field arrays, and multi-step support +- **Design Token Pipeline** — Figma tokens → purpose tokens → theme classes +- **Dark Mode** — Built-in theme provider with system preference detection +- **TypeScript** — Fully typed with exported types for all components -```sh -npx create-turbo@latest -e design-system -``` - -### Useful Commands - -- `pnpm build` - Build all packages, including the Storybook site -- `pnpm dev` - Run all packages locally and preview with Storybook -- `pnpm lint` - Lint all packages -- `pnpm changeset` - Generate a changeset -- `pnpm clean` - Clean up all `node_modules` and `dist` folders (runs each package's clean script) - -## Turborepo - -[Turborepo](https://turborepo.dev) is a high-performance build system for JavaScript and TypeScript codebases. It was designed after the workflows used by massive software engineering organizations to ship code at scale. Turborepo abstracts the complex configuration needed for monorepos and provides fast, incremental builds with zero-configuration remote caching. - -Using Turborepo simplifies managing your design system monorepo, as you can have a single lint, build, test, and release process for all packages. [Learn more](https://vercel.com/blog/monorepos-are-changing-how-teams-build-software) about how monorepos improve your development workflow. - -## Apps & Packages - -This Turborepo includes the following packages and applications: - -- `apps/docs`: Component documentation site with Storybook -- `packages/ui`: Core React components -- `packages/typescript-config`: Shared `tsconfig.json`s used throughout the Turborepo -- `packages/eslint-config`: ESLint preset - -Each package and app is 100% [TypeScript](https://www.typescriptlang.org/). Workspaces enables us to "hoist" dependencies that are shared between packages to the root `package.json`. This means smaller `node_modules` folders and a better local dev experience. To install a dependency for the entire monorepo, use the `-w` workspaces flag with `pnpm add`. - -This example sets up your `.gitignore` to exclude all generated files, other folders like `node_modules` used to store your dependencies. - -### Compilation +### Built With -To make the ui library code work across all browsers, we need to compile the raw TypeScript and React code to plain JavaScript. We can accomplish this with `tsup`, which uses `esbuild` to greatly improve performance. +- **React 19** — Latest React with server component support +- **Tailwind CSS v4** — Utility-first CSS framework +- **Radix UI** — Accessible, unstyled primitives +- **shadcn/ui** — Component foundation layer +- **Conform.js + Zod** — Form state management and schema validation -Running `pnpm build` from the root of the Turborepo will run the `build` command defined in each package's `package.json` file. Turborepo runs each `build` in parallel and caches & hashes the output to speed up future builds. +--- -For `@acme/ui`, the `build` command is equivalent to the following: +## Monorepo Structure -```bash -tsup src/*.tsx --format esm,cjs --dts --external react ``` - -`tsup` compiles all of the components in the design system individually, into both ES Modules and CommonJS formats as well as their TypeScript types. The `package.json` for `@acme/ui` then instructs the consumer to select the correct format: - -```json:ui/package.json -{ - "name": "@acme/ui", - "version": "0.0.0", - "sideEffects": false, - "exports":{ - "./button": { - "types": "./src/button.tsx", - "import": "./dist/button.mjs", - "require": "./dist/button.js" - } - } -} +packages/ + datum-ui/ # Component library (@datum-cloud/datum-ui) + shadcn/ # shadcn/ui primitives (@repo/shadcn) + config/ # Shared config (TypeScript, Tailwind) +apps/ + docs/ # Fumadocs documentation site + storybook/ # Storybook component explorer ``` -Run `pnpm build` to confirm compilation is working correctly. You should see a folder `ui/dist` which contains the compiled output. - -```bash -ui -└── dist - ├── button.d.ts <-- Types - ├── button.js <-- CommonJS version - ├── button.mjs <-- ES Modules version - └── button.d.mts <-- ES Modules version with Types -``` +--- -## Components +## Quick Start -Each file inside of `ui/src` is a component inside our design system. For example: - -```tsx:ui/src/Button.tsx -import * as React from 'react'; - -export interface ButtonProps { - children: React.ReactNode; -} - -export function Button(props: ButtonProps) { - return ; -} +```bash +# Install dependencies +pnpm install -Button.displayName = 'Button'; -``` +# Start Storybook +pnpm --filter storybook dev -When adding a new file, ensure that its specifier is defined in `package.json` file: - -```json:ui/package.json -{ - "name": "@acme/ui", - "version": "0.0.0", - "sideEffects": false, - "exports":{ - "./button": { - "types": "./src/button.tsx", - "import": "./dist/button.mjs", - "require": "./dist/button.js" - } - // Add new component exports here - } -} +# Start documentation site +pnpm --filter docs dev ``` -## Storybook - -Storybook provides us with an interactive UI playground for our components. This allows us to preview our components in the browser and instantly see changes when developing locally. This example preconfigures Storybook to: - -- Use Vite to bundle stories instantly (in milliseconds) -- Automatically find any stories inside the `stories/` folder -- Support using module path aliases like `@acme/ui` for imports -- Write MDX for component documentation pages - -For example, here's the included Story for our `Button` component: +> **Note:** Apps auto-build `@datum-cloud/datum-ui` before starting via a `predev` script. -```js:apps/docs/stories/button.stories.mdx -import { Button } from '@acme/ui/button'; -import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; +--- - +## Usage -# Button +Install the package: -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur tempor, nisl nunc egestas nisi, euismod aliquam nisl nunc euismod. - -## Props - -+ Datum Cloud Design System +
+ + View Documentation + ++ This is the main content area of the card. +
+This is the main content area of the card.
++ A simple card with only content, no header or footer. +
+A simple card with only content, no header or footer.
++ Review and update project settings below. Changes will be applied immediately after saving. +
+Review and update project settings below.
++ Detailed information revealed on demand. +
++ Platform engineer. Joined March 2024. +
+Region: us-east-1
+Replicas: 3 / 3 healthy
+Last deployed: 2 hours ago
+