@nuit-bot/components

Reusable UI components for the Nuit Discord bot dashboard. Designed for dark-themed web UIs using OKLCH design tokens.

Installation

npm install @nuit-bot/components
# or
bun add @nuit-bot/components

Usage

import { Button, Stack, Badge } from "@nuit-bot/components";

Each component imports its own CSS — your bundler (Vite, etc.) handles the .css imports automatically.

import { Button } from "@nuit-bot/components";
import { ConfigPanel } from "@nuit-bot/components";
import { useModuleConfig } from "@nuit-bot/components";
import type { ModuleConfigField } from "@nuit-bot/components";

Config forms

ConfigPanel renders a form from a module's config schema. Pair it with useModuleConfig for state management:

import { ConfigPanel, useModuleConfig } from "@nuit-bot/components";
import type { ModuleConfigField } from "@nuit-bot/components";

const schema: ModuleConfigField[] = [
    { key: "channelId", label: "Channel", type: "channel", optional: true },
    { key: "message", label: "Message", type: "string", max: 500 },
];

function MyConfigPage() {
    const config = useModuleConfig({ initialConfig: {}, schema });

    return (
        <ConfigPanel
            fields={schema}
            values={config.values}
            validationErrors={config.validationErrors}
            onChange={config.onChange}
            onSave={() => { if (config.validate()) save(config.toPayload()); }}
        />
    );
}

Required CSS variables

Components use CSS custom properties for theming. You must define these on :root in your app:

Backgrounds

| Variable | Example | |----------|---------| | --bg-surface | oklch(0.135 0.024 270) | | --bg-elevated | oklch(0.17 0.028 270) | | --bg-overlay | oklch(0.205 0.034 270) | | --bg-hover | oklch(0.245 0.042 270) |

Accent

| Variable | Example | |----------|---------| | --accent-600 | oklch(0.48 0.185 272) |

Semantic colors

| Variable | Example | Used for | |----------|---------|----------| | --danger | oklch(0.68 0.2 25) | Errors, destructive actions | | --danger-subtle | oklch(0.68 0.2 25 / 0.15) | Subtle danger backgrounds | | --warning | oklch(0.84 0.15 80) | Warnings | | --warning-subtle | oklch(0.84 0.15 80 / 0.15) | Subtle warning backgrounds | | --info | oklch(0.715 0.115 222) | Info messages | | --info-subtle | oklch(0.715 0.115 222 / 0.15) | Subtle info backgrounds | | --success-subtle | oklch(0.775 0.145 163 / 0.15) | Success badges |

Borders

| Variable | Example | Opacity | |----------|---------|---------| | --border-subtle | oklch(1 0 0 / 0.07) | Subtle separators | | --border-default | oklch(1 0 0 / 0.13) | Default borders | | --border-strong | oklch(1 0 0 / 0.22) | Focused / active | | --border-accent | oklch(0.635 0.16 272 / 0.6) | Accent borders |

Text

| Variable | Example | Used for | |----------|---------|----------| | --text-primary | oklch(0.96 0.01 270) | Headings, body | | --text-secondary | oklch(0.79 0.011 270) | Subtle labels | | --text-muted | oklch(0.59 0.013 270) | Placeholders, disabled |

Other

| Variable | Example | Used for | |----------|---------|----------| | --neutral-50 | oklch(0.96 0.01 270) | Toggle knob |

Components

| Component | Description | |-----------|-------------| | Badge | Small label (default / success / warning / danger / info) | | Button | Action button (primary / ghost / danger, loading state) | | Card | Container with elevation levels 1–4 | | Checkbox | Custom checkbox with label | | ConfigPanel | Dynamic config form renderer (schema-driven) | | ConfirmationDialog | Modal dialog with backdrop blur | | Container | Centered layout wrapper (sm / md / lg) | | Divider | Horizontal or vertical line | | FieldError | Inline error message | | FieldLevelFeedback | Info / warning / conflict feedback | | FormField | Label + input wrapper with optional/required badges | | FormGroup | Section with title and 2-column grid | | Input | Text, number, password, search input | | Select | Dropdown select | | Stack | Flexbox layout (row/column, gap, align, justify, wrap) | | Textarea | Resizable textarea | | Toggle | Toggle switch | | UnsavedChangesIndicator | Sticky "unsaved changes" bar | | useModuleConfig | Hook for config form state (values, validation, dirty tracking) | | configTypes | Shared TypeScript types (ModuleConfigField, ModuleConfigResponse, etc.) |

Development

bun install          # install dependencies
bun run typecheck    # type-check only
bun run build        # compile TS + copy CSS to dist/

Publishing

Push a tag matching v* — the GitHub workflow publishes to npm with provenance.