|Kit
Changelog

Full log

Every change to the 42 UI kit — chronological, filterable, and tagged per component.

Everything that's changed in @42/ui-react, newest first. Filter by component or change type — your selection lives in the URL, so a filtered view is shareable. Each release also has its own page in the sidebar, and every component documents its own slice of this history at the bottom of its page.

v0.4.0

Divider, brand-tinted floating surfaces, and heading-size aliases

Adds a new Divider component and brand-tints floating-surface colors across Popover, Modal, Drawer, and Notification, plus the docs site background — rounded out by a new AmbientBackground component (brand-tinted noise glow) and a fix converting remaining internal dividers to the brand-derived border. Also adds heading-shaped size aliases (h1-h6, p) for Text and Title, per-item color support in MultiSelect with tinted selected pills, and generalizes placeholder support across form fields (TimeInput, DatePicker, MultiSelect search). Includes a reworked DataTable design, a Textarea redesign (flush resize corner, auto-grow), and new exported hooks (useContainerQuery, useMediaQuery, useUncontrolled, useIsomorphicLayoutEffect).

ambient-background

  1. Baked-color noise, snappier overlay animations

app-shell

  1. Remove the DataTable's outer border in the app-shell example

colors

  1. Flush resize corner, auto-grow with min/max rows

divider

  1. Add Divider component

multi-select

  1. Support per-item color, tinted selected pills

select

  1. Make the pagination footer's wording i18n-ready

  2. Reworked data-table design

skeleton

  1. Add Skeleton loading-placeholder primitive

textarea

  1. Flush resize corner, auto-grow with min/max rows

title

  1. Accept heading-shaped size aliases (h1-h6, p)

General

  1. Add searchPlaceholder for the search field

  2. Export useContainerQuery, useMediaQuery, useUncontrolled, useIsomorphicLayoutEffect

v0.3.1

Border, background, and color-ramp consistency fixes across the kit

Border and background colors across roughly twenty components — Badge, Table, DataTable, Popover, Menu, Notification, TreeSelect, DatePicker, Input, and more — are now consistent: missing borders/backgrounds restored, mismatched gray shades corrected, and floating panels/row highlights unified onto the kit's neutral gray-true and black/white overlay conventions.

General

  1. Correct dozens of mismatched or missing border/background colors across the kit — Badge, AppShell, Table, DataTable, Popover, Menu, Notification, TreeSelect, DatePicker, Input, and more — fixing wrong gray shades against translucent surfaces and unifying row/card hover/selected states onto one black/white overlay convention

v0.3.0

Timeline & AppShell debut, Figma-aligned Button/Card, and a breaking prop-naming cleanup
action-icon

  1. Rename isLoading→loading (Button/ActionIcon), closable→withCloseButton, collapsable→withCollapse, and opened/defaultOpened→open/defaultOpen (Alert/Notification/Notifier), and showWeekNumbers→withWeekNumbers (Calendar)

alert

  1. Rename isLoading→loading (Button/ActionIcon), closable→withCloseButton, collapsable→withCollapse, and opened/defaultOpened→open/defaultOpen (Alert/Notification/Notifier), and showWeekNumbers→withWeekNumbers (Calendar)

app-shell

  1. Aside sits under Header, no border/bg; container-query responsiveness

autocomplete

  1. Rename items→data (RadioGroup/ChoiceCardGroup/SegmentGroup/Menu) and nothingFound→empty (Autocomplete/ComboboxList/MultiSelect/TreeSelect/TreeMultiSelect/MultiComboboxList); also widens onClose to Drawer/Popover/Tooltip/Menu

badge

  1. Story used outdated variant

button

  1. Drop Button's "default" variant (zero-config default is now filled+neutral) and radius prop, and Card's "subtle" variant; also a Figma surface/color alignment pass

  2. Rename isLoading→loading (Button/ActionIcon), closable→withCloseButton, collapsable→withCollapse, and opened/defaultOpened→open/defaultOpen (Alert/Notification/Notifier), and showWeekNumbers→withWeekNumbers (Calendar)

calendar

  1. Rename isLoading→loading (Button/ActionIcon), closable→withCloseButton, collapsable→withCollapse, and opened/defaultOpened→open/defaultOpen (Alert/Notification/Notifier), and showWeekNumbers→withWeekNumbers (Calendar)

  2. Thread translations through the date/date-range column filter

card

  1. Drop Button's "default" variant (zero-config default is now filled+neutral) and radius prop, and Card's "subtle" variant; also a Figma surface/color alignment pass

choice-card-group

  1. Rename items→data (RadioGroup/ChoiceCardGroup/SegmentGroup/Menu) and nothingFound→empty (Autocomplete/ComboboxList/MultiSelect/TreeSelect/TreeMultiSelect/MultiComboboxList); also widens onClose to Drawer/Popover/Tooltip/Menu

combobox-list

  1. Rename items→data (RadioGroup/ChoiceCardGroup/SegmentGroup/Menu) and nothingFound→empty (Autocomplete/ComboboxList/MultiSelect/TreeSelect/TreeMultiSelect/MultiComboboxList); also widens onClose to Drawer/Popover/Tooltip/Menu

date-picker

  1. Make the withTime popover truly hug the calendar

  2. Thread translations through the date/date-range column filter

drawer

  1. Rename items→data (RadioGroup/ChoiceCardGroup/SegmentGroup/Menu) and nothingFound→empty (Autocomplete/ComboboxList/MultiSelect/TreeSelect/TreeMultiSelect/MultiComboboxList); also widens onClose to Drawer/Popover/Tooltip/Menu

menu

  1. Rename items→data (RadioGroup/ChoiceCardGroup/SegmentGroup/Menu) and nothingFound→empty (Autocomplete/ComboboxList/MultiSelect/TreeSelect/TreeMultiSelect/MultiComboboxList); also widens onClose to Drawer/Popover/Tooltip/Menu

multi-combobox-list

  1. Rename items→data (RadioGroup/ChoiceCardGroup/SegmentGroup/Menu) and nothingFound→empty (Autocomplete/ComboboxList/MultiSelect/TreeSelect/TreeMultiSelect/MultiComboboxList); also widens onClose to Drawer/Popover/Tooltip/Menu

multi-select

  1. Rename items→data (RadioGroup/ChoiceCardGroup/SegmentGroup/Menu) and nothingFound→empty (Autocomplete/ComboboxList/MultiSelect/TreeSelect/TreeMultiSelect/MultiComboboxList); also widens onClose to Drawer/Popover/Tooltip/Menu

notification

  1. Rename isLoading→loading (Button/ActionIcon), closable→withCloseButton, collapsable→withCollapse, and opened/defaultOpened→open/defaultOpen (Alert/Notification/Notifier), and showWeekNumbers→withWeekNumbers (Calendar)

notifier

  1. Rename isLoading→loading (Button/ActionIcon), closable→withCloseButton, collapsable→withCollapse, and opened/defaultOpened→open/defaultOpen (Alert/Notification/Notifier), and showWeekNumbers→withWeekNumbers (Calendar)

popover

  1. Rename items→data (RadioGroup/ChoiceCardGroup/SegmentGroup/Menu) and nothingFound→empty (Autocomplete/ComboboxList/MultiSelect/TreeSelect/TreeMultiSelect/MultiComboboxList); also widens onClose to Drawer/Popover/Tooltip/Menu

radio-group

  1. Rename items→data (RadioGroup/ChoiceCardGroup/SegmentGroup/Menu) and nothingFound→empty (Autocomplete/ComboboxList/MultiSelect/TreeSelect/TreeMultiSelect/MultiComboboxList); also widens onClose to Drawer/Popover/Tooltip/Menu

segment-group

  1. Rename items→data (RadioGroup/ChoiceCardGroup/SegmentGroup/Menu) and nothingFound→empty (Autocomplete/ComboboxList/MultiSelect/TreeSelect/TreeMultiSelect/MultiComboboxList); also widens onClose to Drawer/Popover/Tooltip/Menu

text

  1. Add withBorder prop to Header/Description/Footer

time-input

  1. Thread translations through the date/date-range column filter

timeline

  1. Add withBorder prop to Header/Description/Footer

tooltip

  1. Rename items→data (RadioGroup/ChoiceCardGroup/SegmentGroup/Menu) and nothingFound→empty (Autocomplete/ComboboxList/MultiSelect/TreeSelect/TreeMultiSelect/MultiComboboxList); also widens onClose to Drawer/Popover/Tooltip/Menu

tree-multi-select

  1. Rename items→data (RadioGroup/ChoiceCardGroup/SegmentGroup/Menu) and nothingFound→empty (Autocomplete/ComboboxList/MultiSelect/TreeSelect/TreeMultiSelect/MultiComboboxList); also widens onClose to Drawer/Popover/Tooltip/Menu

tree-select

  1. Rename items→data (RadioGroup/ChoiceCardGroup/SegmentGroup/Menu) and nothingFound→empty (Autocomplete/ComboboxList/MultiSelect/TreeSelect/TreeMultiSelect/MultiComboboxList); also widens onClose to Drawer/Popover/Tooltip/Menu

v0.2.0

Calendar & DatePicker debut, single-date presets, time row labels → suffixes

Calendar and DatePicker debut — an inline month grid and trigger+popover pairing sharing one grid implementation. DatePicker's presets sidebar now works in single-date mode too, not just ranges. The embedded time row drops its Hour/Minute/Period labels in favor of a compact h/m/s suffix, backed by a real min-width floor so the fields can't get squeezed illegibly, and DatePicker's popover now sizes its column off the time row's own needs when that's wider than the calendar. Breaking: TimeInput drops range support.

calendar

  1. Pin month/year views to the day view's width, keep them centered

  2. Proper colors

date-picker

  1. Support presets in single-date mode

  2. Support presets/timeZone on the date and date-range filters

time-input

  1. Remove range support

v0.1.3

fix(workflow): publish @42/vite-plugin-theme alongside @42/ui-react

It depends on @42/ui-react and was released in the same PR, but the publish workflow only ever knew about @42/ui-react — add it in lockstep, rewriting its workspace:* dependency to the resolved release version. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

alert

  1. Add Alert — Notification's wide, static sibling

General

  1. Add attribute option to drive .dark class ourselves

  2. Add proper mana symbols

  3. Update docs & script loading for next.js

  4. Stop overcounting selected Pokémon TCG cards

v0.1.0

DataTable v1, toast Notifications, and the Flex rename

Ships DataTable (@42/ui-react/data-table) — sorting, per-column filters, pagination, row selection, resizable columns, and a responsive stack mode — plus toast Notifications over Ark UI's Toast machine. Breaking: Stack is renamed to Flex with a named gap scale (t-shirt spacing tokens are gone), and the ready-made components move onto the root namespace. Also refines Table (striped rows, sticky header/footer, scroll shadows) and ButtonGroup, points Tooltip's arrow at its trigger, and fixes a round of Table/DataTable issues.

button

  1. Height & sticky on fullpage example, striped & hover states

button-group

  1. Refine the borderless divider and equalize row heights

collapse

  1. Add ready made component to root namespace with collapse

combobox-list

  1. Add DataTable v1 on TanStack Table (#11)

file-upload

  1. Height & sticky on fullpage example, striped & hover states

flex

  1. Rename Stack to Flex and move gap to a named scale

menu

  1. Fire item onClick on selection (click + keyboard)

multi-combobox-list

  1. Add DataTable v1 on TanStack Table (#11)

multi-select

  1. Add link to git entries

notification

  1. Add ready made component to root namespace with collapse

table

  1. Height & sticky on fullpage example, striped & hover states

  2. Overflow bug on non-defined height parents

  3. Pin sticky header/pagination and stacked-card states

  4. Striped more in line with figma

theme-icon

  1. Add DataTable v1 on TanStack Table (#11)

tooltip

  1. Arrow shadow

  2. Add an arrow pointing at the trigger

v0.0.1

Initial release

The first release of the 42 UI kit — design foundations, the core interactive primitives, the combobox/picker family, overlays, and the first data-display components.

action-icon

  1. Update playground & button/action-icon/spinner sizes/design

  2. Button colors fix

  3. Add fonts

  4. Initial commit

  5. Slider story & typography

  6. Theme colors not being loaded

autocomplete

  1. ClearSectionMode, consistent clear-vs-chevron

  2. Add typed payload to renderItem

  3. Tap anywhere to open + keyboard-reachable clears

  4. Add renderItem across the picker family

  5. Add Input / Combobox base components

badge

  1. Factorised gradient logic & add card variants

  2. Add fonts

  3. Initial commit

  4. Slider story & typography

  5. Theme colors not being loaded

button

  1. Slider and button sizing tweaks

  2. Factorised gradient logic & add card variants

  3. Update playground & button/action-icon/spinner sizes/design

  4. Button colors fix

  5. Add disabled colors

  6. Add fonts

  7. Initial commit

  8. Reworked playground/story to have better preset handling & labels

  9. Slider story & typography

  10. Theme colors not being loaded

card

  1. Factorised gradient logic & add card variants

  2. Initial commit

  3. Theme colors not being loaded

checkbox

  1. Library-agnostic form support

choice-card-group

  1. Add ChoiceCardGroup (selectable card group — radio / checkbox)

circular-progress

  1. Progress + CircularProgress components

colors

  1. Text-size fixes + OG image refresh

  2. Slider and button sizing tweaks

  3. Add synthetic controls to playground to better control state aware fields

  4. Factorised gradient logic & add card variants

  5. Add disabled colors

  6. Add fonts

  7. Added disabled and preview

  8. Initial commit

  9. Theme colors not being loaded

combobox

  1. Tap anywhere to open + keyboard-reachable clears

  2. Add Input / Combobox base components

container

  1. Initial commit

drawer

  1. Homogenous backdrop blur between drawer & modals

  2. Add Modal, Drawer & imperative modals manager

field

  1. Add Input / Combobox base components

file-upload

  1. Library-agnostic form support

grid

  1. Initial commit

input

  1. Add Input / Combobox base components

kbd

  1. Add Kbd component with docs and dogfood in Button slots

modal

  1. Click outside on modals/drawer

  2. Add Modal, Drawer & imperative modals manager

multi-select

  1. ClearSectionMode, consistent clear-vs-chevron

  2. Add typed payload to renderItem

  3. Tap anywhere to open + keyboard-reachable clears

  4. Add Input / Combobox base components

number-input

  1. Library-agnostic form support

overlays

  1. Click outside on modals/drawer

  2. Add Modal, Drawer & imperative modals manager

password-input

  1. Library-agnostic form support

pill

  1. Add Input / Combobox base components

pills-input

  1. Add Input / Combobox base components

pin-input

  1. Library-agnostic form support

popover

  1. Add Input / Combobox base components

progress

  1. Progress + CircularProgress components

radio-group

  1. Library-agnostic form support

segment-group

  1. Library-agnostic form support

select

  1. ClearSectionMode, consistent clear-vs-chevron

  2. Add typed payload to renderItem

  3. Tap anywhere to open + keyboard-reachable clears

  4. Add renderItem across the picker family

  5. Add Input / Combobox base components

slider

  1. Library-agnostic form support

  2. Add synthetic controls to playground to better control state aware fields

  3. Add size fudamental for components

  4. Added disabled and preview

  5. Initial commit

  6. Slider story & typography

  7. Slider styles

  8. Theme colors not being loaded

spinner

  1. Factorised gradient logic & add card variants

  2. Update playground & button/action-icon/spinner sizes/design

  3. Initial commit

switch

  1. Library-agnostic form support

tags-input

  1. Library-agnostic form support

  2. Add Input / Combobox base components

text

  1. Text-size fixes + OG image refresh

  2. Initial commit

textarea

  1. Library-agnostic form support

title

  1. Add fonts

  2. Initial commit

tooltip

  1. Add Tooltip component

tree-multi-select

  1. ClearSectionMode, consistent clear-vs-chevron

  2. Add typed payload to renderItem

  3. Tap anywhere to open + keyboard-reachable clears

  4. Add Input / Combobox base components

tree-select

  1. ClearSectionMode, consistent clear-vs-chevron

  2. Add typed payload to renderItem

  3. Tap anywhere to open + keyboard-reachable clears

  4. Add Input / Combobox base components

General

  1. Resolve lint findings across the kit

42UI

A small, opinionated React component library for 42 products. Built on Ark UI v5, Tailwind v4, and React 19.

0.4.0

Divider, brand-tinted floating surfaces, and heading-size aliases