odt-lightweight-ui

v1.3.1

Published

5 hours ago

Clean, lightweight, and token-driven React UI component library for ODT

0High
0Medium
0Low

pixel_tk

ODT Lightweight UI

UI component library for React and Next.js applications, styled with CSS Modules and customizable via CSS variables.

Storybook Documentation

Installation

npm install odt-lightweight-ui

# pnpm
pnpm add odt-lightweight-ui

# yarn
yarn add odt-lightweight-ui

# bun
bun add odt-lightweight-ui

Peer Dependencies

{
  "peerDependencies": {
    "react": ">=18.0.0",
    "react-dom": ">=18.0.0"
  }
}

Quick Start

1. Import Styles

Import the stylesheet in your root layout or application entrypoint:

// app/layout.tsx (Next.js) or src/main.tsx (Vite)
import "odt-lightweight-ui/styles.css";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

2. Basic Example

import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardFooter,
  Badge,
  Input,
  Switch,
  toast,
} from "odt-lightweight-ui";

export function AccountSettings() {
  return (
    <Card variant="elevated">
      <CardHeader action={<Badge color="primary" variant="subtle" dot>Active</Badge>}>
        <CardTitle>Account Configuration</CardTitle>
      </CardHeader>

      <CardContent style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
        <Input
          label="Display Name"
          placeholder="e.g. Alex River"
          defaultValue="Alex"
        />
        <Switch
          defaultChecked
          label="Two-Factor Authentication"
          description="Require hardware token on login"
        />
      </CardContent>

      <CardFooter style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
        <Button variant="ghost">Cancel</Button>
        <Button
          variant="filled"
          color="primary"
          onClick={() => toast.success("Settings saved")}
        >
          Save Changes
        </Button>
      </CardFooter>
    </Card>
  );
}

3. Router Links (`asChild`)

Use asChild to pass styling and props to router link elements (such as Next.js <Link>):

import Link from "next/link";
import { Button } from "odt-lightweight-ui";

export function NavigationLink() {
  return (
    <Button asChild variant="filled" color="primary">
      <Link href="/dashboard">Go to Dashboard</Link>
    </Button>
  );
}

Theming & CSS Variables

All components use CSS variables defined on :root. You can override them in your stylesheet:

:root {
  --color-primary-500: hsl(220 90% 56%);
  --color-primary-600: hsl(220 90% 48%);
  --radius-xl: 0.75rem;
  --font-family-sans: "Inter", sans-serif;
}

Dark Mode

Dark mode is applied when .dark or [data-theme="dark"] is set on the <html> element:

.dark,
[data-theme="dark"] {
  --color-surface: hsl(224 25% 12%);
  --color-surface-muted: hsl(224 20% 16%);
  --color-fg: hsl(220 20% 90%);
  --color-line: hsl(224 14% 22%);
}

Tailwind CSS v4

To use with Tailwind CSS v4:

/* app/globals.css */
@import "tailwindcss";
@import "odt-lightweight-ui/tailwind.css";

Components

Integrations

Ruby on Rails: Rails Engine, ViewHelpers, and Stimulus controller via odt-ui-rails.

Development

# Build package (ESM, CJS, types, CSS)
npm run build

# Start Storybook
npm run storybook

# Typecheck
npm run type-check

License

MIT