@arun-dev/ui
Brand-agnostic React component library. Components carry no colors of their own — all visual
styling resolves through semantic CSS custom properties from
@arun-dev/tokens.
Installation
npm install @arun-dev/ui @arun-dev/tokens
Peer dependencies: react >= 19, react-dom >= 19.
Setup — tokens are required
Components read semantic tokens (--color-bg-*, --color-text-*, --color-border-*, …) at
render time. Load the tokens and the component styles once, before any component renders:
import '@arun-dev/tokens/base'; // primitives + default brand
import '@arun-dev/ui/components.css'; // all component styles
To use another brand, replace the brand layer: with the published @arun-dev/tokens/brands/arun, or your own stylesheet —
either generated by createBrand() from @arun-dev/tokens/createBrand, or hand-written. Any
brand CSS must define every variable in the BrandSemanticContract type.
Individual stylesheets are also exported if you prefer à la carte loading: one per component,
named after it — @arun-dev/ui/css/dialog, …/css/range-slider, …/css/fieldset — with
Button's as …/css/btn, plus …/css/reset, …/css/metric and …/css/utilities.
Components
import { Button, Field, Dialog, RangeSlider } from '@arun-dev/ui';
Each component, its props and live examples are on the documentation site, grouped as they are here:
| Group | Components |
|---|---|
| Forms | Calendar, RangeCalendar, Checkbox, Combobox, DatePicker, DateRangePicker, Field, Input, OtpInput, RadioGroup, RangeSlider, Select, Slider, Switch, Textarea |
| Actions | Button, Menu, Menubar, Toggle, ToggleGroup, Toolbar |
| Navigation | Breadcrumb, Link, Pagination, Stepper, Tabs, TreeView |
| Overlays | Dialog, Drawer, HoverCard, Popover, Tooltip |
| Feedback | Alert, Meter, Progress, Skeleton, Spinner, Toast |
| Data display | Accordion, Avatar, Badge, Card, Chip, Kbd, Table |
| Layout and typography | Grid, Heading, Paragraph, Separator, Stack, Text |
Props types are exported for the components this package defines — ButtonProps, CardProps,
BadgeProps and the rest — along with value unions such as ButtonVariant and BadgeTone.
Components backed by @arun-dev/headless —
Switch, Dialog, Menu, RangeSlider and the other namespaced ones — take its props types;
derive them with ComponentProps<typeof Switch.Root>.
Every component also accepts:
className— concatenated with the component's own classes, never replacing them.render— an element or component to render instead of the default. Props,className, event handlers andrefare merged onto it. Its own props win,childrenincluded: an element with no children of its own takes the component's, one that declares children keeps them.ref— merged with any ref on therenderelement.- any other prop — spread onto the rendered element, so
id,aria-*,data-*and event handlers all reach the DOM.
<Chip render={<li />}>React</Chip>
<Card render={<article />} lift>…</Card>
Theming
Light and dark mode come from the token layer — system preference by default, explicit override
via data-theme="dark" / data-theme="light" on the root element. Components need no changes.