@dotdna-io/ui
v0.3.0
Published
Shared React components, design tokens, and charts for DOTDNA products
Readme
@dotdna-io/ui
Shared React component library, design tokens, and charts for DOTDNA products.
- 18+ React primitives — AppShell, Badge, Button, ColorPicker, ConfirmDialog, EventTimeline, IconButton, InlineStatus, LoadingSpinner, Modal, Pagination, PasswordStrengthMeter, SearchableDropdown, SearchInput, Skeleton, EmptyState, Tabs, Tile, TimeRangeGroup, ToggleSwitch, Tooltip, and the Settings layout family.
- React SVG charts — ButterflyChart, CircularGauge, ConcentricArcsChart, ConfidenceDonutGauge, SegmentedScoreBars, plus the
DotDNAChartwrapper. - Design tokens — colors, typography, spacing, radii, shadows, with dark-mode overrides.
- Hooks — useDarkMode / DarkModeProvider, useAdaptivePolling, useDocumentTitle, useInlineStatus.
- Vanilla-JS chart library — 22 chart classes available without React.
ESM + CJS + TypeScript declarations. Peer dependency: React 18 or 19.
Install
npm install @dotdna-io/uiUsage
Import the stylesheet once at your app entry, then use the components:
import '@dotdna-io/ui/styles';
import { Button, Modal } from '@dotdna-io/ui';
export function Example() {
return <Button variant="primary">Click me</Button>;
}Subpath exports
| Import | Contents |
|---|---|
| @dotdna-io/ui | All React components, charts, hooks, and utilities |
| @dotdna-io/ui/styles | Full stylesheet bundle (tokens + dark mode + components) |
| @dotdna-io/ui/styles/tokens.css | Design tokens only |
| @dotdna-io/ui/styles/dark-mode.css | Dark-mode overrides only |
| @dotdna-io/ui/charts-vanilla | Vanilla-JS chart library (populates window.DotDNA*) |
| @dotdna-io/ui/charts-vanilla/style.css | Styles for the vanilla charts |
Dark mode is activated by adding the dark-mode class to <body>.
Design standards
See UI_STANDARDS.md for the design rules behind this
package — tokens, the glossy card surface, badges/buttons/inputs, typography,
animations, and the AppShell layout. Apply the signature surface with the
global glossyCard class:
import '@dotdna-io/ui/styles';
<div className="glossyCard" style={{ padding: 16 }} />License
MIT