← DashboardDocumentation →

Component Gallery

Grouped like Glide. Each card is one configuration — click the ⚙ to tweak it live, or search to filter.

Apply to all

Collections — data views

Multi-row views. Every one wears the same chrome: a title, a live count, search, and pagination.

List · paginated
Ad
Ada Lovelace
Engineering
Active
Gr
Grace Hamilton
Design
Away
Al
Alan Knuth
Research
Offline
Ka
Katherine Johnson
Product
Active
Li
Linus Berners-Lee
Marketing
Away
Ma
Margaret Hopper
Sales
Offline
Page 1 of 6
List · search + filter facets
Ad
Ada Lovelace
Engineering
Active
Ad
Ada Lovelace
Engineering
Active
Ad
Ada Lovelace
Engineering
Active
Al
Alan Knuth
Research
Offline
Al
Alan Knuth
Research
Offline
Al
Alan Knuth
Research
Offline
Page 1 of 6
List · searchable async facet + sort
Ad
Ada Lovelace
Engineering
City AmsterdamCommits 40
Active
Ad
Ada Lovelace
Engineering
City AustinCommits 224
Active
Ad
Ada Lovelace
Engineering
City BarcelonaCommits 148
Active
Al
Alan Knuth
Research
City IstanbulCommits 114
Offline
Al
Alan Knuth
Research
City LisbonCommits 298
Offline
Al
Alan Knuth
Research
City MadridCommits 222
Offline
Page 1 of 6
List · selectable
Card · grid collection
Ada Lovelace
Engineering
Active
Grace Hamilton
Design
Away
Alan Knuth
Research
Offline
Katherine Johnson
Product
Active
Linus Berners-Lee
Marketing
Away
Margaret Hopper
Sales
Offline
Page 1 of 6
DataTable · sortable · searchable · row actions
Status
Ada LovelaceEngineeringActive40
Grace HamiltonDesignAway77
Alan KnuthResearchOffline114
Katherine JohnsonProductActive151
Linus Berners-LeeMarketingAway188
Margaret HopperSalesOffline225
Edsger DijkstraEngineeringActive262
Barbara LamarrDesignAway299
Tim TorvaldsResearchOffline76
Radia PerlmanProductActive113
Donald TuringMarketingAway150
Hedy LiskovSalesOffline187
Ada LovelaceEngineeringActive224
Grace HamiltonDesignAway261
Alan KnuthResearchOffline298
Katherine JohnsonProductActive75
Linus Berners-LeeMarketingAway112
Margaret HopperSalesOffline149
Edsger DijkstraEngineeringActive186
Barbara LamarrDesignAway223
Tim TorvaldsResearchOffline260
Radia PerlmanProductActive297
Donald TuringMarketingAway74
Hedy LiskovSalesOffline111
Ada LovelaceEngineeringActive148
Grace HamiltonDesignAway185
Alan KnuthResearchOffline222
Katherine JohnsonProductActive259
Linus Berners-LeeMarketingAway296
Margaret HopperSalesOffline73
Edsger DijkstraEngineeringActive110
Barbara LamarrDesignAway147
Tim TorvaldsResearchOffline184
Radia PerlmanProductActive221
Donald TuringMarketingAway258
Hedy LiskovSalesOffline295
Kanban · drag cards between columns
To do2
Design login screen
Ada
High
Write component docs
Alan
Low
In progress2
Set up CI pipeline
Grace
Medium
Polish pagination
Ada
Medium
Done1
Ship v1 release
Katherine
High
Calendar · month grid
June 2024
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
31
1
2
3
4
Standup
Design review
5
6
7
8
9
10
11
Sprint planning
1:1 with Ada
12
13
14
15
16
17
18
Launch
19
20
21
22
23
24
25
Retro
26
27
28
29
30
1
2
3
4
5
6
Checklist · tick items off
2/4 done50%
Comments · thread
Ad
Ada Lovelace2h ago

Love the new chart component!

Gr
Grace Hopper1h ago

The live config gear is genius.

Chat · message thread
Did the dashboard ship?
09:41
Yep — charts are live 🎉
09:42
Beautiful.
09:42
Permissions · edit a role
ModuleReadCreateEditDelete
Teams
Members
Roles
Learning
Help
Selectable data
Permissions · view-only role
ModuleReadCreateEditDelete
Teams
Members
Roles
Learning
Help
Selectable data
Permissions · locked Admin role
ModuleLockedReadCreateEditDelete
Teams
Members
Roles
Learning
Help
Selectable data
Permissions · a different app (Sales)
ModuleReadCreateEditDelete
Sales Orders
Invoices
Products
Description list · metadata block
Status
Active
Owner
Ada Lovelace
Plan
Pro
Location
London
Joined
2021-03-14
Activity feed · timeline
  1. Changed the billing email
    Ada · 2024-06-18 08:40
  2. Invited 3 teammates
    Grace · 2024-06-11 10:02
  3. Upgraded to the Pro plan
    Ada · 2024-06-05 14:30
  4. Created the account
    Ada · 2024-06-01 09:12
Record detail · scaffold
AL

Ada Lovelace

Staff Engineer · London

Status
Active
Owner
Ada Lovelace
Plan
Pro
Location
London
Joined
2021-03-14
Screen engine · recipe-driven screens
Ada LovelaceOwnerada@swiftstruck.comActive
Grace HopperAdmingrace@swiftstruck.comActive
Alan TuringMemberalan@swiftstruck.comAway
Katherine JohnsonMemberkj@swiftstruck.comActive

Agent & app — assistant-driven surfaces

The conversation, the 'it's driving the screen' overlay, bulk-job steps, import, learning, and support — all flat, token-driven, dark-mode.

Agent chat · conversation panel
Add Jordan to the Design team as an editor.
On it — I'll open the team and add them.
Opened the Design teamdone

Members · 12

Added Jordan Lee as Editordone

role: editor

Done. Jordan is now an editor on Design.
Copilot overlay · narrates while it drives

A non-blocking bar narrates while an agent drives the screen. Press play — the rest of the page stays usable; only Stop is interactive.

Run steps · multi-step job
  1. Read the uploaded fileDone

    248 rows

  2. Validate against the schemaDone

    3 warnings

  3. Write new membersRunning

    120 / 248

  4. Send welcome emailsPending
Data preview · before write
Previewing 4 of 248 rows 1 issue
NameEmailRole
Ada Lovelaceada@x.comOwner
Grace Hoppergrace@x.comAdmin
alan turingnot-an-emailMember
Katherine Johnsonkj@x.comMember
Import wizard · validate → map → preview
  1. 1
  2. 2
  3. 3

people.csv looks good — 248 rows, 3 columns.

Article body · learning content

Welcome to the team

Guide

Welcome to the team

This short guide covers the basics. Read it, then mark it done.

What you'll learn

  • How teams and roles work
  • Where to find your tasks
  • Who to ask for help

You can always revisit this from the Learning tab.

Open the full resource
Progress toggle
Progress dashboard · members × items
MemberWelcomeSafetyToolsDone
Ada Lovelace3/3
Grace Hopper––1/3
Alan Turing–2/3
Completed3/32/31/3
Ticket thread · stepper drives status, in-thread dropdown off
BugIn progressraised from Members
The export button on the Members screen does nothing when I click it on mobile.
screenshot.png
  1. AssistantDrafted by the assistant5m ago
    Thanks for flagging. This looks like the mobile export handler — I've routed it to the web team and added a workaround note.
  2. GH
    Grace Hopper2m ago
    Confirmed on iOS Safari too. Will pick this up today.

Display — single-record content

Read-mostly blocks that show one record or value (Glide's Fields, Big Numbers, Charts, media…).

Fields · record detail
Name
Ada Lovelace
Role
Staff Engineer
Status
Active
Location
London
Joined
2021-03-14
Commits
1284
Big Numbers · stat grid
Revenue$48,250+12.4% MoM
Active Users1,284+4.1% WoW
Churn2.1%-0.3pt
Chart · bar / line / area / pie / radar
Progress · bar
Storage used62%
Progress · low
Upload28%
Title · profile
Ad

Ada Lovelace

Staff Engineer · London

Title · cover

Release v1

Shipping June 2024

Title · image

What's new

Notes & highlights

Typography

Headline

Body copy for paragraphs and descriptions.

A small muted hint or caption.

Text · truncate / expand

Swift Struck UI is a web-first, cross-platform component & collection library you build entire apps on top of — primitives like shadcn/ui plus data-bound, configurable collections like Glide. This paragraph is intentionally long so you can watch it truncate by lines or characters, or expand to show the whole thing.

Badge · default
New
Badge · success
Active
Badge · warning
Pending
Badge · outline
Draft
Rating · interactive
Rating · read-only
Image
Sample image
Video
Map
Loading map…
Web Embed
Avatar & Tooltip
CNAL
Skeleton · variants
Alert

Inputs & pickers

Everything that collects input. Required fields get the animated teal ring; validation messages come from the config.

Choice · dropdown + search (multi)
Choice · pills (single)
Choice · chips (multi, max 3)
DesignMarketing
Choice · creatable (type a new value)
Entry · text
Entry · email
Entry · number
Entry · multi-line (size)
Field · required + live validation

3–16 characters. Letters, numbers, and underscores.

Checkbox
Switch
Radio Group
Slider
40
Select
Date Picker
File Upload
Signature · required
Notes · editor
Stopwatch
00:00.00
Status stepper · click a stage to change status
Form · validated, config-driven

Actions

Interacting fires a side-effect (navigate, workflow, API).

Button · primary
Button · secondary
Button · outline
Button · destructive
Link (button asChild)
Visit Swift Struck UI
Action Row · profile
Action Row · trailing
Button · access-gated

Layout

Structure & spacing.

Container · background & stacking
One
Two
Three
Card (container)
Project Atlas
A container surface built from tokens.
Separator
OR
Spacer
AboveBelow
Spinner
Accordion

Tabs
Account settings.
Tabs · config (icons + counts)
Inbox — 24 items.
Tabs · line style + tags
Overview content.
Collapsible
Aspect Ratio (16:9)
Scroll Area
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Table (primitive)
InvoiceTotal
INV-001$250.00
INV-002$150.00
INV-003$350.00

Navigation

Move between pages & views.

Toggle & Toggle Group
Breadcrumb
Pagination
Command (⌘K)

Overlays

Float above the page. The ⚙ edits their trigger, title, and body text.

Dialog
Choice · inside a dialog (scrollable list)
Dropdown Menu
Popover
Hover Card
Sheet
Alert Dialog
Toast