Showcase

12 sections · every primitive in every state · light and dark side by side

Buttons

light

Intents

Sizes

States

As a link

dark

Intents

Sizes

States

As a link

Fields

light

Used to sign in.

Optional
Optional
Optional
Optional

Visible to the whole team.

Unlimited
Mbps
Optional

After the start.

dark

Used to sign in.

Optional
Optional
Optional
Optional

Visible to the whole team.

Unlimited
Mbps
Optional

After the start.

Choices

light

Dropdown: three options, eight options with search, invalid, disabled

Segmented: auto and fill, with a count

Checkbox and switch

Every Monday, 9:00.

Ask for a code on new devices.

Up to 5 members.

Irreversible

dark

Dropdown: three options, eight options with search, invalid, disabled

Segmented: auto and fill, with a count

Checkbox and switch

Every Monday, 9:00.

Ask for a code on new devices.

Up to 5 members.

Irreversible

Badges and chips

light

Badge tones

NeutralBrandActivePendingRevokedInfoOutline

Chips

MembersGuestsStaffPlain

Naming what is not built

SoonArrives with billingPortal ads

dark

Badge tones

NeutralBrandActivePendingRevokedInfoOutline

Chips

MembersGuestsStaffPlain

Naming what is not built

SoonArrives with billingPortal ads

Cards and states

light

Monthly recurring revenue

Across all workspaces.

$48,210

▲ 12% vs last month

Notifications3 channels

Email, push and in-app. Slack arrives with integrations.

Portal adsSoon

Scheduled creatives on the captive portal.

Nothing to configure yet.

Nothing waiting

Requests appear here as people ask. Share the join link to get the first one.

dark

Monthly recurring revenue

Across all workspaces.

$48,210

▲ 12% vs last month

Notifications3 channels

Email, push and in-app. Slack arrives with integrations.

Portal adsSoon

Scheduled creatives on the captive portal.

Nothing to configure yet.

Nothing waiting

Requests appear here as people ask. Share the join link to get the first one.

Overlays

light

Dialog: 560 and 760, never closes on backdrop or Escape

Sheet, split button, menu, tooltip, popover

dark

Dialog: 560 and 760, never closes on backdrop or Escape

Sheet, split button, menu, tooltip, popover

Feedback

light

Toasts confirm; errors also live in place

Status strip (top of page): in flight, confirmed, failed

Staged changes bar (bottom of page)

dark

Toasts confirm; errors also live in place

Status strip (top of page): in flight, confirmed, failed

Staged changes bar (bottom of page)

Page and tabs

light

Settings

Surfing policies

Default
6 policies across 8 methods · last edited Aug 27, 2026 · all changes pushed
Page-level tabs switch whole views and each has its own URL.

dark

Settings

Surfing policies

Default
6 policies across 8 methods · last edited Aug 27, 2026 · all changes pushed
Page-level tabs switch whole views and each has its own URL.

Lists

light

MemberGroupDevicesEnds
Ananya Kulkarni110758 · no mobileCSE0 / 3May 31, 2029
Bikram Sen110301 · no mobileCSE2 / 3May 31, 2027
Chitra Rao110412 · no mobileECE1 / 3Dec 31, 2026

3 of 3 members · identity masked in lists

dark

MemberGroupDevicesEnds
Ananya Kulkarni110758 · no mobileCSE0 / 3May 31, 2029
Bikram Sen110301 · no mobileCSE2 / 3May 31, 2027
Chitra Rao110412 · no mobileECE1 / 3Dec 31, 2026

3 of 3 members · identity masked in lists

Data table

light

Status
Door sensor00:1a:2b:3c:03:03IoT basic2027-04-13111 MBonline
Door sensor 800:1a:2b:3c:08:08IoT wide2027-09-18296 MBoffline
Door sensor 1300:1a:2b:3c:13:03IoT wide2027-05-14481 MBonline
Door sensor 1800:1a:2b:3c:18:08IoT basic2027-01-10666 MBonline
Door sensor 2300:1a:2b:3c:23:03IoT wide2027-06-15851 MBonline
Door sensor 2800:1a:2b:3c:28:08IoT wide2027-02-11136 MBoffline
Kiosk00:1a:2b:3c:04:04IoT wide2027-05-14148 MBoffline
Kiosk 900:1a:2b:3c:09:09IoT basic2027-01-10333 MBonline
Kiosk 1400:1a:2b:3c:14:04IoT wide2027-06-15518 MBonline
Kiosk 1900:1a:2b:3c:19:09IoT wide2027-02-11703 MBonline
Kiosk 2400:1a:2b:3c:24:04IoT basic2027-07-16888 MBoffline
Kiosk 2900:1a:2b:3c:29:09IoT wide2027-03-12173 MBonline
Lobby camera00:1a:2b:3c:00:00IoT basic2027-01-100 MBoffline
Lobby camera 500:1a:2b:3c:05:05IoT wide2027-06-15185 MBonline
Lobby camera 1000:1a:2b:3c:10:00IoT wide2027-02-11370 MBonline
Lobby camera 1500:1a:2b:3c:15:05IoT basic2027-07-16555 MBonline
Lobby camera 2000:1a:2b:3c:20:00IoT wide2027-03-12740 MBoffline
Lobby camera 2500:1a:2b:3c:25:05IoT wide2027-08-1725 MBonline
Lobby camera 3000:1a:2b:3c:30:00IoT basic2027-04-13210 MBonline
Printer 2F00:1a:2b:3c:01:01IoT wide2027-02-1137 MBonline
Printer 2F 600:1a:2b:3c:06:06IoT basic2027-07-16222 MBonline
Printer 2F 1100:1a:2b:3c:11:01IoT wide2027-03-12407 MBonline
Printer 2F 1600:1a:2b:3c:16:06IoT wide2027-08-17592 MBoffline
Printer 2F 2100:1a:2b:3c:21:01IoT basic2027-04-13777 MBonline
Printer 2F 2600:1a:2b:3c:26:06IoT wide2027-09-1862 MBonline
33 devices

dark

Status
Door sensor00:1a:2b:3c:03:03IoT basic2027-04-13111 MBonline
Door sensor 800:1a:2b:3c:08:08IoT wide2027-09-18296 MBoffline
Door sensor 1300:1a:2b:3c:13:03IoT wide2027-05-14481 MBonline
Door sensor 1800:1a:2b:3c:18:08IoT basic2027-01-10666 MBonline
Door sensor 2300:1a:2b:3c:23:03IoT wide2027-06-15851 MBonline
Door sensor 2800:1a:2b:3c:28:08IoT wide2027-02-11136 MBoffline
Kiosk00:1a:2b:3c:04:04IoT wide2027-05-14148 MBoffline
Kiosk 900:1a:2b:3c:09:09IoT basic2027-01-10333 MBonline
Kiosk 1400:1a:2b:3c:14:04IoT wide2027-06-15518 MBonline
Kiosk 1900:1a:2b:3c:19:09IoT wide2027-02-11703 MBonline
Kiosk 2400:1a:2b:3c:24:04IoT basic2027-07-16888 MBoffline
Kiosk 2900:1a:2b:3c:29:09IoT wide2027-03-12173 MBonline
Lobby camera00:1a:2b:3c:00:00IoT basic2027-01-100 MBoffline
Lobby camera 500:1a:2b:3c:05:05IoT wide2027-06-15185 MBonline
Lobby camera 1000:1a:2b:3c:10:00IoT wide2027-02-11370 MBonline
Lobby camera 1500:1a:2b:3c:15:05IoT basic2027-07-16555 MBonline
Lobby camera 2000:1a:2b:3c:20:00IoT wide2027-03-12740 MBoffline
Lobby camera 2500:1a:2b:3c:25:05IoT wide2027-08-1725 MBonline
Lobby camera 3000:1a:2b:3c:30:00IoT basic2027-04-13210 MBonline
Printer 2F00:1a:2b:3c:01:01IoT wide2027-02-1137 MBonline
Printer 2F 600:1a:2b:3c:06:06IoT basic2027-07-16222 MBonline
Printer 2F 1100:1a:2b:3c:11:01IoT wide2027-03-12407 MBonline
Printer 2F 1600:1a:2b:3c:16:06IoT wide2027-08-17592 MBoffline
Printer 2F 2100:1a:2b:3c:21:01IoT basic2027-04-13777 MBonline
Printer 2F 2600:1a:2b:3c:26:06IoT wide2027-09-1862 MBonline
33 devices

Shell pieces

light

Header chips, notifications, workspace switcher, account menu

2Online now
OfflineSystem status
3

Command palette trigger (⌘K) and side navigation

dark

Header chips, notifications, workspace switcher, account menu

2Online now
OfflineSystem status
3

Command palette trigger (⌘K) and side navigation

Charts

light

Stacked area: parts of a whole over time (legend toggles and spotlights a series)

Online users, last 24 hours
MembersGuestsAssets
00:00243
01:00212
02:00212
03:00212
04:00212
05:00242
06:00212
07:00453
08:00682
09:008112
10:0010162
11:0011152
12:0011152
13:0011152
14:0010133
15:008142
16:00682
17:00452
18:00212
19:00212
20:00242
21:00213
22:00212
23:00212

Lines: series compared, not summed

Members and guests online, last 24 hours
MembersGuests
00:0024
01:0021
02:0021
03:0021
04:0021
05:0024
06:0021
07:0045
08:0068
09:00811
10:001016
11:001115
12:001115
13:001115
14:001013
15:00814
16:0068
17:0045
18:0021
19:0021
20:0024
21:0021
22:0021
23:0021

Stacked bars: magnitude by month, 2px seams, rounded data-end

Wallet activity by month
SMSTop-ups
Apr12040
May16060
Jun14020
Jul21080
Aug19050
Sep9030

Horizontal bars: a ranking with long labels

Sessions by zone, today
Sessions
Lobby412
Seaside Café268
Dorm block B191
Conference room97
Staff LAN44

Donut: at most five parts, total in the centre, share in the legend

8online now
  • Free Wi-Fi563%
  • Members225%
  • Voucher113%

Radial progress: one number against its ceiling, tone by threshold

40%of 1 GB
72%of 5 GB
96%of quota
99.6%7 days

Heat strip: state per 15 minutes, worst state wins when bucketed

  • Up
  • Degraded
  • Down
  • No data
95.2% up · 2 degraded · 2 down
00:0006:0012:0018:0024:00
95.2% up · 2 degraded · 2 down

Usage bars: 60% warns, 90% is critical, unlimited has no ceiling

Daily data1.4 GB of 5 GB28%
Daily data (warning)3.4 GB of 5 GB68%
Daily data (critical)4.7 GB of 5 GB94%
Daily data (unlimited)3.2 · Unlimited

Sparklines beside a number; the number carries the fact

2425

Empty state at the chart's size

No data yet

Traffic appears once the gateway reports.

dark

Stacked area: parts of a whole over time (legend toggles and spotlights a series)

Online users, last 24 hours
MembersGuestsAssets
00:00243
01:00212
02:00212
03:00212
04:00212
05:00242
06:00212
07:00453
08:00682
09:008112
10:0010162
11:0011152
12:0011152
13:0011152
14:0010133
15:008142
16:00682
17:00452
18:00212
19:00212
20:00242
21:00213
22:00212
23:00212

Lines: series compared, not summed

Members and guests online, last 24 hours
MembersGuests
00:0024
01:0021
02:0021
03:0021
04:0021
05:0024
06:0021
07:0045
08:0068
09:00811
10:001016
11:001115
12:001115
13:001115
14:001013
15:00814
16:0068
17:0045
18:0021
19:0021
20:0024
21:0021
22:0021
23:0021

Stacked bars: magnitude by month, 2px seams, rounded data-end

Wallet activity by month
SMSTop-ups
Apr12040
May16060
Jun14020
Jul21080
Aug19050
Sep9030

Horizontal bars: a ranking with long labels

Sessions by zone, today
Sessions
Lobby412
Seaside Café268
Dorm block B191
Conference room97
Staff LAN44

Donut: at most five parts, total in the centre, share in the legend

8online now
  • Free Wi-Fi563%
  • Members225%
  • Voucher113%

Radial progress: one number against its ceiling, tone by threshold

40%of 1 GB
72%of 5 GB
96%of quota
99.6%7 days

Heat strip: state per 15 minutes, worst state wins when bucketed

  • Up
  • Degraded
  • Down
  • No data
95.2% up · 2 degraded · 2 down
00:0006:0012:0018:0024:00
95.2% up · 2 degraded · 2 down

Usage bars: 60% warns, 90% is critical, unlimited has no ceiling

Daily data1.4 GB of 5 GB28%
Daily data (warning)3.4 GB of 5 GB68%
Daily data (critical)4.7 GB of 5 GB94%
Daily data (unlimited)3.2 · Unlimited

Sparklines beside a number; the number carries the fact

2425

Empty state at the chart's size

No data yet

Traffic appears once the gateway reports.