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.

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