21 Table blocks, in Figma and React

Tables are the workhorse of every application UI, and they just got the full shadcncraft treatment. The Figma UI Kit gains a new tables category with 21 blocks, and every one of them ships as a React block built with TanStack Table.

21 Table blocks in Figma#

• 17 real-world tables covering the views applications actually need: customer lists, invoices, transactions, team members, task lists, support ticket queues, audit logs, file managers, product leaderboards, market overviews, role permission matrices, and analytics.
• 5 state blocks most kits skip: empty (no data), empty (no results), loading, error, and offline. Every stage of a data view is designed, not improvised.
• Like the rest of the kit, all of them respond to the Style and Theme variable modes, so every table works across all eight styles in light and dark.

For React: built with TanStack Table#

The React versions are not static markup. Every table is wired up with TanStack Table, with working logic and realistic sample data out of the box:

• Sorting on the columns you'd expect: dates, amounts, names.
• Filtering with global search plus multi-select filters for status, role, method, and more.
• Pagination, either numbered or through a shared data-table-pagination component that blocks recompose instead of duplicating.
• Row selection with bulk actions, and per-row action menus.
• Column visibility toggles from the toolbar.
• Empty, loading, error, and offline states as dedicated blocks you can drop into any of the tables above.

Install one with the CLI and it adapts to your base, style, and icon library like every other shadcncraft block.

Badge: success and warning#

A smaller update: Badge picks up two new variants, success and warning, joining the existing set. They're tuned per style, work in light and dark, and are used throughout the new tables for status columns.

Availability#

• The tables category is available now for Pro and Pro + React customers.
• The React blocks are included with Pro + React.