dynamic-ui-react

Storybook → — live docs, every component, both brands, light/dark.

A multi-brand, structurally-themeable React component library. One frozen component API — swapping the brand doesn't just repaint colours, it can genuinely restructure a layout. Built with React and Tailwind CSS v4 (tailwind-variants for recipes); interactive widgets wrap Ark UI.

Two brands ship today: know2code (a coding-education console — cool blue, sharp radii, dark by default) and LMS (a general learning platform — forest green and marigold, generous radii, light by default). Light/dark is an orthogonal axis from brand, so both vary independently.

Install

npm install dynamic-ui-react
npm install react react-dom

react and react-dom are peer dependencies (^18 or ^19).

Usage

import 'dynamic-ui-react/styles.css';
import { BrandProvider, Card, Button } from 'dynamic-ui-react';

function App() {
  return (
    <BrandProvider brand="know2code" colorScheme="dark">
      <Card>
        <Card.Body>Hello, world.</Card.Body>
        <Card.Footer>
          <Button tone="solid">Continue</Button>
        </Card.Footer>
      </Card>
    </BrandProvider>
  );
}

Every component reads its --brand-* tokens from the nearest BrandProvider — nothing renders correctly without one.

Styling: pick one of two paths

A. You do NOT use Tailwind (or just want it to work out of the box) — import the prebuilt stylesheet:

import 'dynamic-ui-react/styles.css';

This ships every class the components use. It intentionally does not include Tailwind's global preflight reset, so it won't clobber your app's base styles — bring your own reset if you don't have one.

B. You DO write Tailwind v4 utilities alongside the kit (e.g. bg-primary, rounded-element in your own markup, themed by the active BrandProvider). Don't import styles.css — instead register this package's theme in your own Tailwind entry so your build generates those utilities too:

/* your app's main CSS */
@import "tailwindcss";
@import "dynamic-ui-react/theme.css";
@source "../node_modules/dynamic-ui-react/dist";

theme.css maps the --brand-* tokens onto Tailwind's namespaces (so your bg-primary/rounded-element resolve to the active brand) and carries the component-recipe chrome; the @source line lets Tailwind scan the shipped components so their classes are emitted in your build.

Why Tailwind must be installed for path B. Tailwind v4 has no "generate everything" mode — it only emits the classes it finds by scanning source (@source) at build time, including arbitrary values (text-[13px], top-[22%]), which can't be enumerated ahead of time. There is no prebuilt file that can give you the full Tailwind utility set; if you want to write arbitrary Tailwind classes in your own markup, Tailwind has to run in your project. styles.css (path A) only ever contains the fixed set of classes this package's own components use — it's not a substitute for path B.

CodeEditor (optional)

CodeEditor wraps Monaco (~5 MB) and is published from a separate entry so it never enters your bundle unless you opt in. Install Monaco and import from the subpath:

npm install monaco-editor @monaco-editor/react

import { CodeEditor } from 'dynamic-ui-react/code-editor';

What's provided

~57 components across two tiers:

• Primitives (open, accept children) — Forms, Buttons, Overlays, Feedback, Navigation, Layout, Data Display, and Typography. Includes Input, Select, Combobox, DatePicker, FileUpload, Dialog, Tooltip, Card, Table, Tabs, and more.
• Kit (locked, data-prop only) — AppShell, PageHeader, DataTable, EmptyState, SearchBar, ConfirmDialog. Built so a non-expert consumer can't render it off-brand.

See the Storybook — open the Getting started page for the full walkthrough, or Introduction for the concept. Every category has its own sidebar section with live, brand-switchable examples.

Contributing to the library itself? See CONTRIBUTING.md.

License

MIT