Latest updates and announcements.
ReUI follows shadcn onto the cn package, and the Event Calendar and Data Grid each get back an interaction that was unreachable before.
Breaking changes:
cn from the instead of your @/lib/utils, following shadcn upstream - .cn in its dependencies, so shadcn add installs the package on the first such install - .@/lib/utils is untouched - .clsx and tailwind-merge from your own project, run pnpm dlx shadcn@latest migrate cn - .cn in @/lib/utils, rebuild it with createCn from cn/config; newly installed items no longer route through that file - .Fixes & Improvements:
EventCalendar: timed views reserve a clickable strip at the end of each day column, so a press beside a full-width block creates a new event instead of doing nothing - Preview.EventCalendar: the strip's width is the --ec-event-gutter custom property, default 0.75rem; set classNames.dayColumn: "[--ec-event-gutter:0px]" to restore edge-to-edge blocks - Docs.DataGridPagination: moved from fixed page blocks to an adaptive window carrying the first and last page, so the last page is always one click away instead of several ellipsis steps - Docs.DataGridPagination: the existing moreLimit prop now counts the buttons in the truncated middle and is rounded down to an odd count with a floor of 3; page buttons carry a per-style min-width so the row keeps a steady width as you page - Docs.Cascader: virtual rows froze at their first window in apps built with React Compiler, which cached the row list against a virtualizer identity that never changes - Preview.Filters: defaultOperator now documents what it does - the operator a rule falls back to when its field changes, not a preselection on create - Docs.Frame: the radius ladder was structurally broken and is now resolved per style - Preview.NumberField: size ladders restored across all 8 styles - .DataGrid: the column resize handle used a non-Tailwind class to suppress text selection during a drag - .New: Data Grid Editing API and Localization.
DataGridCellSelection gains apiRef with focusCell(rowId, columnId, { edit }), landing cell focus, DOM focus and aria-activedescendant together on rows still mounting - Docs.tableLayout.cellFillHandleVariant: the default solid dot, an Excel-style square, or a Sheets-style hollow ring on the selection corner - Docs.tableClassNames.rowPinned, rowCreate and cellFillHandle override the pinned-row chrome, the add-row affordance and the fill handle - Docs.getDataGridVisibleSelectedCellCount helper keeps a selection count consistent with the painted range - Docs.onRowCreate and appendRow, matching the standard body - Docs.onCellSelectionChange delivers a resolved selection snapshot: the focused cell, every bound, the active bound and the visible cell count - Docs.cellEdit.editable accepts a function of the row, locking rows across paste, fill, clear and the editors - Docs.invertDataGridCellsChange helper derives the undo batch from any onCellsChange payload - .clearSelection and scrollToCell, and the add-row label is localizable via rowCreateLabel - .tableLayout.cellEditMode: "click"; double-click stays the default - .i18n on DataGrid replaces every built-in string in one place, menu items and aria labels included, with function labels for interpolated copy - .DataGridTableVirtual: only the horizontal window of center columns renders, pinned columns stay mounted, with controlled scrollToColumnIndex - .onCellsCopy reports every clipboard write with the copied grid and a cut flag, for toast confirmations - .tableLayout.cellEditEnterAdvance restores the Sheets move-down; an Enter commit now keeps focus on the edited cell by default - .data-cell-control marks a custom widget whose active surface is wider than its buttons, so a press anywhere on it follows the two-step gesture - .rowCount on useTable for the page buttons and as recordCount on DataGrid for the info text - .Fixes & Improvements:
DataGridCellSelection: Sheets-style chrome, with a lighter tint, a solid perimeter that tracks the drag, an unfilled anchor cell and a dashed fill marquee - Preview.DataGridCellSelection: the perimeter's top line is clamped inside the first row, so a sticky header cannot paint over it - Preview.DataGridCellSelection: the perimeter survives the first and last column and the last row, and the fill handle stays inside the grid - Preview.DataGridCellSelection: the built-in editor sits exactly on the cell, so opening it no longer grows the row by 2px, and it is named after its column - Preview.DataGridCellSelection: copy, cut, clear, paste and fill act only on visible rows, so a page-boundary range cannot write hidden ones - Docs.DataGridCellSelection: a fill across columns runs the target's parse and reports rejections, like a paste - Docs.DataGridCellSelection: Shift and arrows still extend a range after a modifier click on a control cell - Docs.DataGridCellSelection: Escape on an in-cell control returns focus to the grid, and AltGr chords type instead of selecting all - Docs.DataGridTable: columnsResizeMode: "onChange" writes widths to the table element, so a drag costs no React render per move - Docs.DataGridTable: pinned header cells stay put under a sticky header, so the corner no longer scrolls away - .DataGridTable: the resize handle is its own data-slot span, so an end-aligned header cannot swallow the menu click - .DataGridTable: aria-rowcount counts pinned extras and aria-multiselectable follows the selection mode - .DataGridTableVirtual: rows and the header row are memoized, so a scroll frame renders only what enters the window - .DataGrid: meta.autoSize columns reflow with the container down to minSize, and leave a dragged width alone - .DataGrid: onRowCreate hands focus to the grid when a draft replaces it, and its click survives a multi-cell selection - .DataGridPagination: the page-size select no longer clips 3-digit sizes, and page buttons carry accessible names - .DataGridTableRowPin: bottom-pinned rows cast their boundary shadow upward - .Combobox: chips in the spreadsheet editing example are outline badges with an avatar and a remove button - .New: Data Grid Spreadsheet Editing.
tableLayout.cellSelection - Docs.onCellsChange write contract plus per-column meta.cellEdit parse, format and clear rules - Docs.cellEdit.control, opened by Enter, F2, typing or double-click - Docs.onCellEditRequest for custom controls like selects - Docs.onRowCreate add-row, getRowStatus row tints and getCellStatus corner marks - Docs.meta.fillWidth, keeping the grid full-width - Docs.DataGridSelectionBar shell for bulk edits over row selection - Docs.New Components:
Fixes & Improvements:
DataGridTable: cell borders no longer float against the resize filler strip when cellBorder meets columnsResizable - Preview.DataGridTable: resize handles no longer double the header separators when cellBorder is on - Preview.DataGridTable: end-pinned columns resize from their start edge, indicator on the correct side - Preview.DataGridTable: the viewport no longer draws a browser focus outline during keyboard navigation - Preview.DataGridCellSelection: the focused cell ring is a quiet 1px border-tone outline, and the editor keeps text exactly in place - Preview.New: Shadcn Code Block.
parseUnifiedDiff, plus indentation-based code folding in any language - Preview.'wasm-unsafe-eval' in your CSP - Docs.github-light / github-dark, any shiki theme, or --code-token-* design tokens - Docs.Gantt dependencies and milestones:
Fixes & Improvements:
New component - Cascader:
drill (default), columns and tree - Docs.selectable="any", so a parent is never chosen by accident on the way to its children - Docs.getChildren rather than from mutating items, so a lazily loaded tree needs no local copy of the data - Docs.Filters rebuilt:
FilterQuery tree rather than an array of chips. Seed it with createFilterQuery(), read it with flattenFilterConditions, and drive it through query / onQueryChange or uncontrolled defaultQuery - Docs.variant picks the chrome: basic for the chip bar, advanced for the builder panel (advancedMode popover or inline). Both edit the same tree - Docs.Breaking changes:
filters / onChange and createFilter() no longer exist; use query / onQueryChange and createFilterQuery() - Docs.Fixes & Improvements:
Data Grid on TanStack Table v9:
useTable({ features: dataGridFeatures }), so there is no more per-table getCoreRowModel / getSortedRowModel / getFilteredRowModel / getPaginationRowModel wiring - Docs.dataGridFeatures bundle, plus the DataGridFeatures, DataGridTableInstance, DataGridColumnMeta and DataGridLayoutProps types - Docs.ColumnMeta for every other table in your app. The global module augmentation is gone, replaced by a DataGridColumnMeta interface wired through the bundle's columnMeta slot - Docs."use no memo" came out of 78 registry files; the primitive reads state through TanStack's Subscribe instead, and the few examples that still need it each carry a comment saying why - Preview.Breaking changes:
@tanstack/react-table v9 in your project. The docs ship a copy-paste migration prompt that walks a coding agent through the whole port - Docs.left / right to start / end. That covers initialState.columnPinning, column.pin() and getIsPinned(), and the emitted data-pinned, data-last-col and data-outer-pinned-col attributes. CSS selecting [data-pinned="left"] needs updating to [data-pinned="start"] - Docs.DataGridProps takes a leading TFeatures generic, useDataGrid is generic, and the sub-component prop types are feature-parameterized. VisibilityState is now ColumnVisibilityState - .Fixes & Improvements:
dropIndicator prop, on by default - Preview.meta.autoSize stay resizable. A width you drag by hand is no longer overwritten by the next viewport measurement - Preview.data-slot="data-grid-table-resize-indicator" for styling - Preview.xs and sm sizes as full circles - Preview.Features:
renderRowDecoration - Docs.Fixes & Improvements:
Features:
Features:
Fixes & Improvements:
Features:
Fixes & Improvements: