0.0.1

The first release of @42/ui-react lays the whole groundwork: a design system built on a shared (variant × color) model and one xs–xl size scale, plus ~40 components — each shipping with a docs page, a live playground story, and tests. A few of them, live:

Foundations

The color system, typography (Lato for text, Kode Mono for accents and code), the shared size scale, gradient/theming tokens, and the layout primitives Container, Grid, Stack, Text and Title. Every accent-aware component reads the same palette off a data-color attribute:

<Badge variant="light" color="green">Validated</Badge><Badge variant="light" color="blue">In progress</Badge><Badge variant="light" color="red">Failed</Badge><Badge variant="light" color="gray">Queued</Badge>

Inputs & forms

The interactive primitives — Button, ActionIcon, Slider, Kbd, Spinner, Badge, Card — plus a full form suite wired to a single library-agnostic contract (value / onChange / onBlur / ref / name), so react-hook-form, TanStack Form, and native <form> submission all work without an adapter: Input, Field, Checkbox, RadioGroup, Switch, SegmentGroup, Textarea, PasswordInput, NumberInput, PinInput, FileUpload and TagsInput.

<Button variant="filled" color="brand">Book an eval slot</Button><Checkbox label="I followed the Norm" defaultChecked /><Switch label="Available for evaluations" defaultChecked /><Slider defaultValue={42} />

The picker family

Select, MultiSelect, Autocomplete, Combobox, TreeSelect and TreeMultiSelect share one input shell and a renderItem callback with typed payloads, tap-anywhere-to-open, and a consistent clear-vs-chevron behaviour (clearSectionMode).

<Select data={['Paris', 'Lyon', 'Nice', 'Berlin']} placeholder="Pick a campus" />

Overlays

Modal and Drawer, driven either by open / onOpenChange or by an imperative createModals manager (open / confirm / context / stacked), plus the hover-and-focus Tooltip and the click-panel Popover:

// Hint on hover / focus<Tooltip label="Saved automatically" asChild><Button variant="default">Hover me</Button></Tooltip>// Click-panel<Popover.Root><Popover.Trigger asChild><Button>Intra</Button></Popover.Trigger><Popover.Content>…</Popover.Content></Popover.Root>// Modal & Drawer (or drive them imperatively with createModals)<Modal open={open} onOpenChange={setOpen} title="Welcome aboard">…</Modal><Drawer open={open} onOpenChange={setOpen} placement="end" title="Filters">…</Drawer>

Data display

Progress and CircularProgress, plus ChoiceCardGroup — a selectable card group that switches between radio and checkbox semantics.

<Progress value={62} variant="gradient" /><CircularProgress value={62} variant="gradient" size="lg" />

<ChoiceCardGrouplabel="Next project"defaultValue="minishell"items={[  { value: 'philosophers', label: 'Philosophers', description: 'Threads and mutexes.' },  { value: 'minishell', label: 'Minishell', description: 'Parsing, pipes, builtins.' },  { value: 'cub3d', label: 'Cub3D', description: 'Raycasting, Wolfenstein-style.' },]}/>

Git history