Components

63 components and blocks for admin apps. Each page has a live example, the API, the patterns it keeps and the reasons behind it. Install first.

• Status

  New invoice

  Selection	Invoice	Client	Paid	Amount	Status
  	INV-1041	Northwind Traders		1,280.00EUR	Paid
  	INV-1042	Blue Yonder Airlines		460.50EUR	Overdue
  	INV-1043	Contoso		2,150.00EUR	Due
  	INV-1044	Fabrikam		90.00EUR	Paid

  1–4 of 4

  Data

  9

  Records in lists: the data table, its toolbar, filters, columns, cells and pages, and a log of changes.

  • Avatar
  • Data table
  • Filter
  • Filter list
  • Log
  • Pagination
  • Table
  • Table columns
  • Table toolbar

• Revenue in September

  +11.9%+11.9%, bettervs August

  €14,100

  Charts

  6

  Numbers over time and parts of a whole: area, bar and donut charts, sparklines and the card they stand in.

  • Area chart
  • Bar chart
  • Chart card
  • Delta
  • Donut chart
  • Sparkline
• Client

  Due on

  Sat, Oct 31SunMonTueWedThuFriSat, JanFebMarAprMayJunJulAugSepOctNovDec 28, 2026Choose a date

  Currency

  EuroUS dollarEuroSelect…

  Remind three days before

  Form

  13

  Fields a person fills in: text, choices and files, each with its label and error.

  • Checkbox
  • Code input
  • Dropzone
  • Field
  • Input
  • List field
  • Password field
  • Radio group
  • Scale input
  • Select
  • Stepper
  • Switch
  • Textarea
• October 2026

  October 2026

  Choose the first day

  Sun	Mon	Tue	Wed	Thu	Fri	Sat
  27	28	29	30	1	2	3
  4	5	6	7	8	9	10
  11	12	13	14	15	16	17
  18	19	20	21	22	23	24
  25	26	27	28	29	30	31
  1	2	3	4	5	6	7

  7 days

  Dates

  4

  Picking a day, a time or a period: the calendar, the date and time pickers and the date range.

  • Calendar
  • Date picker
  • Date range
  • Time picker
• 3 selectedArchiveDelete

  Actions

  5

  What a person presses: buttons, icon and copy buttons, groups and links.

  • Button
  • Button group
  • Copy button
  • Icon button
  • Link

• • INV-1041

    Northwind Traders

  • INV-1042

    Blue Yonder Airlines

  • INV-1043

    Contoso

  Contoso

  Name

  Email

  Overlays

  8

  What opens over the page: dialogs, drawers, menus, popovers, toasts and tooltips.

  • Confirm
  • Crud drawer
  • Drawer
  • Menu
  • Modal
  • Popover
  • Toaster
  • Tooltip
• Layout

  11

  How a screen is put together: the app shell, cards, lists, stacks and tabs.

  • App shell
  • Aspect ratio
  • Card
  • Header
  • List
  • List item
  • Reveal
  • Separator
  • Stack
  • Tabs
  • Truncate
• 3APPaidPending

  Status

  7

  How things stand: badges, counts, progress, loading and empty states.

  • Badge
  • Count
  • Indicator
  • No data
  • Progress
  • Skeleton
  • Spinner