@dynamic-mockups/design-system

v1.0.2

Published

20 days ago

A professional, scalable design system built with React 18, TypeScript, shadcn/ui, Tailwind CSS, and Storybook

0High
0Medium
0Low

milosmedic

nemanjakovacevic

design-system react typescript shadcn tailwindcss storybook components ui

🎨 Dynamic Mockups Design System

A scalable React design system built with shadcn/ui + Tailwind CSS v4.

📦 Tech Stack

React 18 — components are forwardRef/function components
TypeScript 5 — full type safety
shadcn/ui — components built on the unified radix-ui primitives + class-variance-authority
Tailwind CSS v4 — styling via utility classes; theme tokens in radix-luma / mist palette
Tabler & Iconify — icons (@tabler/icons-react for component glyphs, @iconify-icon/react for data-driven solar:* icons)
Vite 6 — library build (ESM + CJS) and Storybook dev/build
Storybook 10 — component documentation

The design tokens mirror the consuming app's shadcn theme (mockup-generator-react/src/v2/styles/v2.css) so components render consistently in both projects.

🚀 Usage

Installation

yarn add @dynamic-mockups/design-system react react-dom

Runtime peers react/react-dom are required. The package depends on radix-ui, class-variance-authority, clsx, tailwind-merge, @tabler/icons-react and @iconify-icon/react (installed automatically).

Setup

1. Import the stylesheet once (it ships the Tailwind utilities the components use plus the theme tokens — self-contained, no Tailwind config needed in the consumer):

// main.tsx / index.tsx
import '@dynamic-mockups/design-system/styles.css';

2. Use the components:

import { Button, Badge, FlagBadMockups } from '@dynamic-mockups/design-system';

function Example() {
  return (
    <div>
      <Button variant="default" size="lg">Save</Button>
      <Badge variant="secondary">New</Badge>
      <FlagBadMockups onSubmit={(reason, feedback) => report(reason, feedback)} />
    </div>
  );
}

Dark mode

Tokens are declared on :root (light) and .dark. Add the dark class to an ancestor (e.g. <html class="dark">) to switch themes. Modal/Dialog content portals into the host app's .v2-root element when present (falling back to document.body), so it inherits the active theme either way.

🧩 Components

Atoms — Button, IconButton, Badge, Checkbox, Switch, Skeleton, Spinner, RadioGroup (+ RadioGroup.Item), TextArea, Stepper, Link, Strong.

Molecules — Modal (+ Modal.Header / Modal.Content / Modal.Footer), RadioSelector, CheckboxChip, CheckboxChipGroup.

Organisms — FlagBadMockups, OnboardingInfoBox, CTABox, OnboardingArtwork.

Templates — OnboardingTemplate + OnboardingFlowManager (+ fullOnboardingFlowConfig), CancellationFlowTemplate + useCancellationFlowManager (+ defaultCancellationFlowData).

The cn class-merge helper is also exported.

📚 Scripts

yarn storybook          # Storybook dev server on :6006
yarn dev                # Vite dev server
yarn build              # Build the library (Vite + tsc declarations)
yarn build-storybook    # Build static Storybook
yarn typecheck          # TypeScript type checking
yarn test               # Unit tests (Vitest)

📦 Build output

dist/
├── index.mjs            # ESM bundle
├── index.js             # CommonJS bundle
├── index.d.ts           # TypeScript declarations (entry)
├── design-system.css    # Self-contained Tailwind + theme styles
└── components/ lib/      # Per-module declarations

Package exports:

{
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    },
    "./styles.css": "./dist/design-system.css"
  }
}

Runtime dependencies (react, radix-ui, class-variance-authority, clsx, tailwind-merge, @tabler/icons-react, @iconify-icon/react) are externalized from the bundle so the consumer dedupes a single copy.

Developed by https://dynamicmockups.com

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme