Tables

Rows sharing one schema: Table (React Aria’s grid), TableCard (the card shell), and TableRowActionsDropdown. Two sizes, set on the card.

Demo

hero
Olivia Rhye
Olivia Rhyeolivia@untitledui.com
Component
Cell type
size
Lead action type
// Avatar — Figma 1224:5904. // Avatar at size md or sm, 12px to the text at md and 8 at sm. // The sheet's symbol is 320px wide at md, lead action included. // The sheet draws the lead action inside the cell — a checkbox. // A real table is different: selectionMode inserts a selection // column of its own, and only ever a checkbox. A radio or a toggle // is a column you place yourself. <Table.Cell> <div className="flex items-center gap-3"> <Checkbox aria-label="Select row" /> {/* A person: a 40px avatar at md, 32 at sm, with the name over a handle or an email. */} </div> </Table.Cell>

In context

in-context
View in a page

Family

family
Name
Olivia Rhye
Phoenix Baker
Table
Name
Role
Table.Header
Company
Table.Head
Olivia Rhye
Olivia Rhye@olivia
Table.Row
Active
Table.Cell
Name
Role
No rows yet
Table.Body
TableCard.Root

Members

20
TableCard.Header
TableRowActionsDropdown

Types

cells

Fifteen cell Types, three lead actions and four header shapes, at md.

Identity

Olivia Rhyeolivia@untitledui.com
Text
Olivia Rhye
Olivia Rhyeolivia@untitledui.com
Avatar
Tech requirements.pdf200 KB
File type icon
Visa ending in 1234Expiry 06/2028
Payment method

Status

Active
Badge
LabelLabelLabel+4
Badges multiple

Data

$1,800Up 20%
Trend positive
$1,800Down 20%
Trend negative
60%
Progress bar
4 out of 5
Star ratings
10 users
Olivia Rhye
Phoenix Baker
Lana Steiner
Demi Wilkinson
Candice Wu
Avatar group

Controls and actions

Select dropdown
Action buttons
Action icons
Action dropdown icon

Lead action

Olivia Rhye
Olivia Rhyeolivia@untitledui.com
Checkbox
Olivia Rhye
Olivia Rhyeolivia@untitledui.com
Radio
Olivia Rhye
Olivia Rhyeolivia@untitledui.com
Toggle

Header cell

Company
with checkbox: selectionMode multiple
Company
label
Company
label and help icon
empty: aria-label only, the actions column

Sizes

cells

Two sizes, set on the card; a bare table takes its own.

Card, header and rows

Team members

3 members

Manage the people in this workspace.

Name
Role
Status
Olivia Rhye
Olivia Rhye@olivia
Product designerActive
Phoenix Baker
Phoenix Baker@phoenix
Product managerActive
Lana Steiner
Lana Steiner@lana
Frontend developerActive
size sm

Team members

3 members

Manage the people in this workspace.

Name
Role
Status
Olivia Rhye
Olivia Rhye@olivia
Product designerActive
Phoenix Baker
Phoenix Baker@phoenix
Product managerActive
Lana Steiner
Lana Steiner@lana
Frontend developerActive
size md
Name
Role
Status
Olivia Rhye
Olivia Rhye@olivia
Product designerActive
Phoenix Baker
Phoenix Baker@phoenix
Product managerActive
Lana Steiner
Lana Steiner@lana
Frontend developerActive
size sm on a bare Table, no card

Cells at sm

Olivia Rhyeolivia@untitledui.com
Text, size sm
Olivia Rhye
Olivia Rhyeolivia@untitledui.com
Avatar, size sm
Tech requirements.pdf200 KB
File type icon, size sm
Visa ending in 1234Expiry 06/2028
Payment method, size sm
Action dropdown icon, size sm
Company
header cell, label, size sm

Tones

cells
Member
Role
Teams
Status
Olivia Rhye
Olivia Rhye@olivia
Product designer
DesignProduct+4
Active
Phoenix Baker
Phoenix Baker@phoenix
Product manager
ProductMarketing+2
Active
Lana Steiner
Lana Steiner@lana
Frontend developer
Engineering+3
Active
Demi Wilkinson
Demi Wilkinson@demi
Backend developer
Engineering
Invited
Divider line, the default
Member
Role
Teams
Status
Olivia Rhye
Olivia Rhye@olivia
Product designer
DesignProduct+4
Active
Phoenix Baker
Phoenix Baker@phoenix
Product manager
ProductMarketing+2
Active
Lana Steiner
Lana Steiner@lana
Frontend developer
Engineering+3
Active
Demi Wilkinson
Demi Wilkinson@demi
Backend developer
Engineering
Invited
Alternating fills: Header bg-primary, Row odd:bg-secondary, dividers kept

Compositions

cells

The sheet’s four composed screens and its six empty tables.

The sheet’s four

Team members

20 users
Name
Status
Role
Email address
Teams
Andi Lane
Andi Lane@andi
ActiveProduct managerandi@untitledui.com
Product+2
CW
Candice Wu@candice
ActiveFullstack developercandice@untitledui.com
EngineeringProduct+1
Demi Wilkinson
Demi Wilkinson@demi
InvitedBackend developerdemi@untitledui.com
Engineering
Drew Cano
Drew Cano@drew
InvitedUX copywriterdrew@untitledui.com
DesignMarketing
Eve Leroy
Eve Leroy@eve
ActiveBrand designereve@untitledui.com
DesignMarketing+1
FS
Florence Shaw@florence
ActiveFinance leadflorence@untitledui.com
Operations
Kate Morrison
Kate Morrison@kate
ActiveQA engineerkate@untitledui.com
EngineeringProduct+1
KO
Koray Okumus@koray
ActiveData analystkoray@untitledui.com
Data
Lana Steiner
Lana Steiner@lana
ActiveFrontend developerlana@untitledui.com
Engineering+3
Loki Bright
Loki Bright@loki
ActiveSupport leadloki@untitledui.com
SupportProduct+1
Team members: header, filters band, ten rows, pagination

Customers

These companies have purchased in the last 12 months.

Company
Status
About
Users
License use
Figmafigma.com
Customer
Design softwareInterface design and prototyping
Olivia Rhye
Phoenix Baker
Lana Steiner
Demi Wilkinson
Drew Cano
70%
GitHubgithub.com
Churned
Source controlCode hosting and review
Olivia Rhye
Phoenix Baker
Lana Steiner
Demi Wilkinson
Drew Cano
60%
Next.jsnextjs.org
Customer
Web frameworkReact framework for production
Olivia Rhye
Phoenix Baker
Lana Steiner
Demi Wilkinson
Drew Cano
30%
Vitevite.dev
Customer
Build toolingFast bundling and dev server
Olivia Rhye
Phoenix Baker
Lana Steiner
Demi Wilkinson
Drew Cano
80%
Claudeclaude.ai
Churned
AI assistantWriting, analysis and code
Olivia Rhye
Phoenix Baker
Lana Steiner
Demi Wilkinson
Drew Cano
20%
Cursorcursor.com
Customer
Code editorAI-native development
Olivia Rhye
Phoenix Baker
Lana Steiner
Demi Wilkinson
Drew Cano
10%
Replitreplit.com
Customer
Cloud IDEBuild and deploy in the browser
Olivia Rhye
Phoenix Baker
Lana Steiner
Demi Wilkinson
Drew Cano
40%
Customers: header with description, filters band, no pagination
Invoice
Date
Status
Customer
Purchase
#3066Jan 6, 2027Paid
Olivia Rhye
Olivia Rhyeolivia@untitledui.com
Monthly subscription
#3065Jan 6, 2027Paid
Phoenix Baker
Phoenix Bakerphoenix@untitledui.com
Monthly subscription
#3064Jan 6, 2027Paid
Lana Steiner
Lana Steinerlana@untitledui.com
Monthly subscription
#3063Jan 5, 2027Paid
Demi Wilkinson
Demi Wilkinsondemi@untitledui.com
Monthly subscription
#3062Jan 5, 2027Refunded
CW
Candice Wucandice@untitledui.com
Monthly subscription
#3061Jan 5, 2027Paid
Natali Craig
Natali Craignatali@untitledui.com
Monthly subscription
#3060Jan 4, 2027Cancelled
Drew Cano
Drew Canodrew@untitledui.com
Monthly subscription
#3059Jan 3, 2027Paid
OD
Orlando Diggsorlando@untitledui.com
Monthly subscription
#3058Jan 3, 2027Paid
Andi Lane
Andi Laneandi@untitledui.com
Monthly subscription
#3057Jan 3, 2027Paid
Kate Morrison
Kate Morrisonkate@untitledui.com
Monthly subscription
Invoices: a bare table over Previous and Next

Files uploaded

File name
File size
Date uploaded
Last updated
Uploaded by
Tech requirements.pdf200 KB
200 KBJan 4, 2027Jan 4, 2027Olivia Rhye
Dashboard screenshot.jpg720 KB
720 KBJan 4, 2027Jan 4, 2027Phoenix Baker
Dashboard prototype recording.mp416 MB
16 MBJan 2, 2027Jan 2, 2027Lana Steiner
Dashboard prototype FINAL.fig4.2 MB
4.2 MBJan 6, 2027Jan 6, 2027Demi Wilkinson
UX Design Guidelines.docx400 KB
400 KBJan 8, 2027Jan 8, 2027Candice Wu
Dashboard interaction.aep12 MB
12 MBJan 6, 2027Jan 6, 2027Natali Craig
Briefing call recording.mp318.6 MB
18.6 MBJan 4, 2027Jan 4, 2027Drew Cano
Files uploaded: header with two actions, table only

Empty tables

Vendors

24 active

Manage the suppliers this workspace buys from.

No vendors found

Your search “Stripe” did not match any vendors. Please try again or add a new vendor.

No search results

Users

128 online

Keep track of vendors and their security ratings.

No users found

Your search did not match any users.

No users found

Integrations

0 connected

Connect the tools your team already uses.

Add your first integration

Connect the tools you use every day to automate workflows and keep your data in sync.

Nothing added yet

Team members

Manage the people in this workspace.

Invite your first user

Add your team members and external users.

Invite the first user

Team members

Something went wrong...

We had some trouble loading this page. Please refresh the page or get in touch for support.

Something went wrong

Team members

You’re offline

Please check your internet connection and try again. If the issue continues, contact support.

Offline

Content

cells
Name
Role
No members yetInvite someone to fill the first row.
no rows: renderEmptyState
Name
Role
Olivia RhyePrincipal product designer, platform, growth and design systems
Phoenix BakerProduct manager
a long value truncates, never wraps
Name
Role
Olivia RhyeProduct designer
Phoenix Baker—
an empty value: an em dash

Team members

3 members

Manage the people in this workspace.

Name
Role
Olivia RhyeProduct designer
Phoenix BakerProduct manager
Lana SteinerFrontend developer
card header: title, badge, description, trailing action

Behaviour

cells
Name
Teams
Usage
Trend
Olivia Rhye
Olivia Rhye@olivia
DesignProduct+4
82%
Up 12%
Phoenix Baker
Phoenix Baker@phoenix
ProductMarketing+2
64%
Up 8%
Lana Steiner
Lana Steiner@lana
Engineering+3
47%
Down 3%
a wide table in a narrow column: Tab in, arrow keys scroll
from md: the selection column and card insets widen

Loading

cells

Cells

Loading cell
text cell, size md
Loading cell
avatar cell, size md
Loading cell
badge cell, size md
Loading cell
avatar cell, size md, checkbox real

A table

Loading rows
five rows, size sm, lead checkbox real
Loading rows
five rows, size md, lead checkbox real

States

cells

Sorting

Company
no arrow: allowsSorting off
Company
chevron selector: sortable, not the sorted column
Company
arrow down: sorted descending
Company
arrow up: sorted ascending

Selection

Team members

5 members

Manage the people in this workspace.

Name
Role
Status
Candice WuFullstack developerActive
Demi WilkinsonBackend developerInvited
Lana SteinerFrontend developerActive
Olivia RhyeProduct designerActive
Phoenix BakerProduct managerActive
selected, sortable, a help tooltip and a row menu, live

Team members

3 members

Manage the people in this workspace.

Name
Role
Status
Olivia RhyeProduct designerActive
Phoenix BakerProduct managerActive
Lana SteinerFrontend developerActive
selected and hover share one tint, live