UILab

Blocks

Ready-made features you add to your project with one command and then own.

Components (Button, Dialog, ...) come from the uilab-core package and you import them. Blocks are bigger features built from those components. The CLI copies their source into your project, so you can change anything.

npx shadcn@latest add @uilab-core/data-table

First time? Connect the registry once in Get started.

Data

Data Table

Read-only lists with paging, sorting and filters. State lives in the URL.

Data Grid

Spreadsheet-style editing, keyboard navigation and copy-paste.

Dialogs and feedback

Confirmation Dialog

Ask “Are you sure?” before destructive actions.

Sonner

Toast notifications for success, errors and progress.

Guidance and layout

Tour

Step-by-step walkthrough that highlights parts of the page.

Layout

Page container with consistent width and padding.

Which table should I use?

If you need to...Use
Show records, filter them and share the filtered linkData Table
Let users edit cells in place, like a spreadsheetData Grid

Coming soon

  • Date Picker: single date, range and presets
  • Form Fields: inputs wired to react-hook-form

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Confirmation Dialog

The Confirmation Dialog component provides a consistent way to ask users for confirmation before performing destructive or important actions

On this page

DataDialogs and feedbackGuidance and layoutWhich table should I use?Coming soon