@smarter-dharma/sd-ui

TypeScript React component library for the SmarterDharma ecosystem. Built with Vite, Tailwind CSS, and TypeScript.

Features

• TypeScript-first with exported prop types
• Tailwind CSS styling with theme tokens
• Dual ESM + CJS builds
• Optional stylesheet entry (@smarter-dharma/sd-ui/styles)
• Scoped npm package: @smarter-dharma/sd-ui

Documentation

| Document | Description | | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | | Component reference & examples | Full API tables, prop options, and usage examples for every component | | Development guide | Contributor setup, testing, and publishing (repository only) |

After npm install, the component reference is also available locally at node_modules/@smarter-dharma/sd-ui/docs/COMPONENTS.md.

Installation

npm install @smarter-dharma/sd-ui

Peer dependencies (install in your app):

npm install react react-dom

If you use TanstackTable:

npm install @tanstack/react-table

Usage

Import styles once at your app entry (recommended):

import '@smarter-dharma/sd-ui/styles';

Import components from the package root:

import { H1, Body1, Button, TextField, Select, TanstackTable } from '@smarter-dharma/sd-ui';

export default function App() {
  return (
    <div>
      <H1 color="primary">Welcome</H1>
      <Body1>Dashboard overview</Body1>
      <Button variant="primary" onClick={save}>
        Save
      </Button>
      <TextField label="Email" placeholder="[email protected]" />
    </div>
  );
}

Package exports

| Import path | Purpose | | ------------------------------ | --------------------- | | @smarter-dharma/sd-ui | Components and hooks | | @smarter-dharma/sd-ui/styles | Compiled Tailwind CSS |

Theming

Components use design tokens from the library Tailwind config. Override colors in your app with CSS variables, for example:

:root {
  --color-primary: #1976d2;
  --color-cta-start: #1ab8e8;
  --color-cta-end: #0e7490;
}

See Button theming in the component reference for token details.

Component overview

| Area | Components | | ---------- | ----------------------------------------------------------------------------------------- | | Typography | Typography, H1–H6, Body1, Caption, … | | Actions | Button, IconButton, ButtonGroup, PrimaryButton, Chip, ToggleButton | | Forms | TextField, Input, FloatingTextField, InputField, Select, CheckBox, Dropdown | | Feedback | Modal, ConfirmModal, Tooltip, Progress, CircularProgress, Skeleton | | Layout | Card, Paper, Box, Drawer, Accordion | | Data | TanstackTable, TableColumn |

Full prop tables and examples: Component reference

Scripts (consumers)

This package ships pre-built artifacts in dist/. You do not need to build it in consuming apps.

Contributing

See the development guide for setup, coding standards, and release workflow.

Made with ❤️ by SmarterDharma Team