Changelog

Data Table and Data Grid now ship for both Base UI and Radix, and both run on TanStack Table v9.

Installs no longer include a manual import-path rewrite. The registry writes component, config, and type imports in place.

Data Table

• Filtering. Text, number, range, date, date range, boolean, select, and multi-select, each with its own operators. Compose them as a filter list or a command-style filter menu.
• Sorting. Multi-column sorting, persisted in the URL.
• Pagination. Manual pagination with a required pageCount, plus page size options.
• URL state. Page, page size, sort, filters, and join operator stay in the query string through nuqs.
• Columns. Visibility, ordering, sizing, and pinning. Pin with start and end.
• Rows. Single or multi-row selection, with an action bar for the current selection.
• Keyboard. Ctrl/Cmd + Shift + F toggles the filter menu, Ctrl/Cmd + Shift + S toggles the sort menu, and Backspace or Delete removes the focused filter or sort.

Data Grid

A virtualized, spreadsheet-style grid for large datasets.

• Editing. In-place editing across short text, long text, number, URL, checkbox, select, multi-select, date, and file cells.
• Selection. Cell and row selection with keyboard and mouse, including shift-range selection.
• Clipboard. Copy, cut, and paste, including TSV from Excel or Google Sheets. Paste can add rows when the copied range runs past the grid.
• Undo and redo. useDataGridUndoRedo tracks cell edits, added rows, and deleted rows. Ctrl/Cmd + Z undoes, and Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y redoes.
• Find. Ctrl/Cmd + F searches cells and steps through matches.
• Filter and sort menus. Operator-based filters and multi-column sorts, both reorderable.
• Columns. Resize, pin (start / end), hide, and reorder. Double-click a resize handle to fit the column.
• Rows. Add and delete through onRowAdd and onRowsDelete. Row height is short, medium, tall, or extra-tall.
• Modes. readOnly locks editing. autoFocus focuses the first navigable cell, or a specific { rowIndex, columnId }. Direction follows DirectionProvider.

TanStack Table v9

useDataTable and useDataGrid are still the public hooks. Under them, tables are created with useTable and an explicit feature set: dataTableFeatures for the table, dataGridFeatures for the grid.

Column definitions, columns, rows, and the table instance take that feature set as the first type argument. Row data must extend RowData. Column meta and table meta come from the feature set, so the old declare module "@tanstack/react-table" augmentation is gone.

import type { ColumnDef } from "@tanstack/react-table";
 
import type { DataTableFeatures } from "@/lib/data-table-features";
 
const columns: ColumnDef<DataTableFeatures, Project>[] = [
  // ...
];
 
const { table } = useDataTable({
  data,
  columns,
  pageCount,
  initialState: {
    columnPinning: { start: ["select"], end: ["actions"] },
  },
});

Pinning state is { start, end }. Column visibility state is ColumnVisibilityState. Row models are created with createSortedRowModel, createFilteredRowModel, createPaginatedRowModel, and createFacetedRowModel, rather than the v8 get*RowModel helpers.

Presentation

Presentation is a set of composable primitives for viewing and editing PowerPoint files in the browser. It is built on @diceui/pptx and ships for both Base UI and Radix.

pnpm dlx shadcn@latest add @diceui/presentation

import {
  Presentation,
  PresentationContent,
  PresentationError,
  PresentationLoading,
  PresentationSelection,
  PresentationSlide,
  PresentationThumbnailList,
  PresentationViewport,
} from "@/components/ui/presentation";

PresentationSelection is the editing overlay. It supports drag-to-move, resize, inline text, multi-select, and keyboard shortcuts, and it renders only when the file was loaded with readOnly={false}.

A companion zoom control is available as @diceui/presentation-zoom-select.

Base UI is the default

Docs and new installs now default to Base UI with the nova preset (base-nova). Radix pages are still published alongside them.

Styles

The registry resolves every official style id: base and radix, each with vega, nova, maia, lyra, mira, luma, sera, and rhea. Nova itself landed in June.

Sortable and Kanban

Sortable and Kanban now have Base UI variants.

The Banner component now supports multiple positioning strategies, giving you more control over how banners are rendered in your layout.

Positioning Strategies

The Banners provider accepts a new strategy prop with four options:

• fixed (default): Fixed to the viewport, rendered via portal into document.body
• absolute: Positioned within a container, rendered via portal (container needs position: relative)
• static: Rendered inline, pushes content down
• sticky: Sticks within a scroll container

// Inline banner that pushes content down
<Banners strategy="static">
  <App />
</Banners>
 
// Sticky banner within a scroll container
<Banners strategy="sticky" side="top">
  <App />
</Banners>

fixed and absolute strategies portal banners out of the DOM tree. static and sticky render banners inline, either above or below children depending on side.

Other Improvements

• Improved type documentation for Banners and Banner props
• Aligned stacked banner demo action order (primary → secondary) for consistent dismiss targets

We've shipped several major improvements to Dice UI's component infrastructure and documentation.

Unified Radix UI Package

All components have been migrated from individual @radix-ui/react-* packages to the unified radix-ui package. This follows Radix UI's official consolidation effort and simplifies dependency management.

- import * as SelectPrimitive from "@radix-ui/react-select"
+ import { Select } from "radix-ui"

Optimized Utility Components

The ClientOnly and Portal components have been rewritten using useSyncExternalStore for better performance and proper SSR/hydration handling.

Benefits:

• No useState + useLayoutEffect pattern needed
• Proper SSR/Hydration with explicit server vs client snapshots
• No hydration mismatches