@dcs-tech/ui

React UI components and design tokens — form fields, buttons, tooltips, popups and layout primitives, built on one shared control surface so every control agrees on size, spacing and state.

Install

npm i @dcs-tech/ui react react-dom

React >=18 is a peer dependency — your app brings its own copy.

Use

import { Button, Input, Select, Suggest, Tooltip, Typography } from '@dcs-tech/ui';
import '@dcs-tech/ui/style.css';   // tokens + component CSS, import once at the root

export const Example = () => (
  <>
    <Input label="Party name" tooltip="Legal name as printed on the invoice" />
    <Select label="Material" options={[{ name: 'Cotton', value: 'cotton' }]} search group />
    <Tooltip content="Deletes this row"><Button color="error">Delete</Button></Tooltip>
    <Typography variant="body1" truncate={{ lines: 2 }}>Long text…</Typography>
  </>
);

What's in it

• Fields — Input, Select, Suggest, Checkbox, Radio, Switch, ChipInput, all sharing one control surface, a 6-step size scale and one state model
• Primitives — Button, Typography, Tooltip
• Layout — Collapsible, FieldWrapper
• Composites — Form, Fields, EditableTable
• Tokens — a hue-variable theme: --primary-hue: 211 retints the whole palette from one number, with light and dark themes keyed off data-theme

Theming

Every colour, size and spacing value is a CSS custom property. Override them on :root after importing the stylesheet:

:root { --primary-hue: 264; }          /* retints the entire theme */
:root { --border-radius-sm: 4px; }

Sizes and variants

size is uniform across every control: xxs | xs | small | medium | large | xl.

variant is per family — outlined | filled | standard | underlined for text fields, outlined | filled | standard for Checkbox and Radio, none for Switch.

Development

This package is built from a monorepo. See ../PUBLISHING.md for the release process.

Licence

UNLICENSED — © DCS Tech. All rights reserved.