A production-ready design system published to Nexus and consumed by all UI projects via the DevKit scaffold.
┌─────────────────────┐ publish ┌─────────────────┐
│ packages/ui │ ──────────────▶ │ Nexus Repo │
│ (@yourorg/ui) │ │ npm-hosted │
│ │ └────────┬────────┘
│ • Components │ │ npm install
│ • Compositions │ ▼
│ • Tokens │ ┌──────────────────────────┐
│ • Types/utils │ │ devkit / │
└─────────────────────┘ │ Client Projects │
│ (Next.js + @yourorg/ui) │
┌─────────────────────┐ └──────────────────────────┘
│ apps/storybook │
│ (visual docs) │
└─────────────────────┘
| Package | Description | Published |
|---|---|---|
packages/ui |
Component library | ✅ Nexus |
apps/storybook |
Visual docs | ❌ Internal |
devkit |
Next.js starter scaffold | ❌ Git template |
npm installnpm run buildnpm run storybook# 1. Bump version
cd packages/ui
npm version patch # or minor / major
# 2. Build
npm run build
# 3. Publish (requires NEXUS_NPM_TOKEN env var)
npm publishThe devkit/ folder is a ready-to-use Next.js scaffold. To start a new project:
# Copy it (or use it as a GitHub template)
cp -r devkit my-new-project
cd my-new-project
# Point .npmrc to your Nexus instance (edit the URL)
# Then install
npm install
# Start dev server
npm run devThe devkit/.npmrc file scopes @yourorg/* packages to your Nexus instance.
Everything else falls through to the public registry.
All visual values live in packages/ui/src/tokens/tokens.css as CSS custom properties.
/* Import once at your app root */
import '@yourorg/ui/tokens';
/* Dark mode — set on the html element */
<html data-theme="dark">Every component exposes a testId prop for Cypress / Playwright E2E testing.
Child elements are namespaced automatically:
<Modal testId="confirm-modal" ... />
// DOM renders:
// data-testid="confirm-modal" → root
// data-testid="confirm-modal__title" → title
// data-testid="confirm-modal__body" → body
// data-testid="confirm-modal__footer" → footer
// data-testid="confirm-modal__close" → close button// Playwright
await page.getByTestId('confirm-modal__close').click();- Button (5 variants, 3 sizes, loading, icons)
- Heading (decoupled level / visual size)
- Badge (6 variants, dot)
- Input + Textarea (states, adornments)
- Checkbox + Radio + RadioGroup
- Toggle / Switch
- Select (single, multi, searchable, clearable, grouped)
- FileUploader (drag-and-drop + fallback, multi-file)
- Avatar (image + initials fallback, status dot)
- Tabs (line, pill, enclosed variants)
- Breadcrumbs
- Pagination
- Stepper (horizontal/vertical, numbered/dot)
- EmptyState + EmptyStateIcons
- Skeleton + Spinner + Progress
- Modal (5 sizes, Radix Dialog, Framer Motion)
- Drawer / Sheet / SlideOver (4 sides)
- Toast / Snackbar (context-based, 5 variants)
- Tooltip (Radix)
- Popover (Radix)
- Card (4 variants, interactive, media/header/footer slots)
- HeroSection (animated stagger, eyebrow/title/subtitle/actions)
- FormLayout + FormRow + FormSection + FormActions
- Design tokens (colors, spacing, type, shadows, motion, z-index)
- Dark mode via
data-theme="dark" -
prefers-reduced-motionsupport - Full ARIA / accessibility (Radix primitives)
- Namespaced
data-testidon every DOM element - Storybook 8 with autodocs + a11y + themes addon
- tsup build → ESM + CJS + .d.ts
- Nexus publish config
- DevKit Next.js scaffold
- Playwright example tests