A sign-in screen with real validation, a pending state, and an error that is announced rather than just coloured red.
8 components · Surface, Field, Input, PasswordInput +4
Blocks
Whole screens, assembled from the library and nothing else — no block introduces a colour, a radius or a spacing value of its own. Take one as the starting point for a real product screen, or read it to see how the pieces are meant to fit together.
- screens
- 11
- categories
- 3
- components used
- 66
Authentication
3
Account creation with a live password strength meter and terms that must be accepted before the button will submit.
8 components · Surface, Field, Input, PasswordInput +4
The six-digit step after a password: an OTP field that submits on completion, a resend timer, and a verified state.
6 components · Surface, InputOTP, Button, Alert +2
Application
6
A team admin panel that works end to end: sort, select and page the members table, invite someone through a validated dialog, change roles, and undo a removal from the toast.
13 components · DataTable, Modal, Field, Input +9
A freight operations console: live KPIs, a sortable consignment table with selection, volume and fleet charts, and a route event feed.
10 components · AppShell, Navbar, Sidebar, PageHeader +6
Tabbed account settings with real switches, a regional panel, and a save bar that sticks to the foot of the form.
10 components · PageHeader, Tabs, Card, Field +6
A person page: identity, shift status, four measured figures, a definition list of facts, and a recent-activity timeline.
8 components · Avatar, Badge, StatusDot, Metric +4
The signed-in home of a SaaS app: workspace switcher, account menu, trial banner, KPIs, a setup checklist, plan usage and what is new.
11 components · WorkspaceSwitcher, Sidebar, UserMenu, FeedbackWidget +7
A SaaS admin area in five tabs — workspace settings, team and roles, billing, security and developer access — every control working.
12 components · SegmentedControl, SettingsSection, DangerZone, InviteMembers +8
Marketing
2
A landing section — headline, feature grid, measured figures and a closing call to action — themed entirely by the accent.
5 components · Badge, Text, Button, Surface +1
A whole SaaS homepage: announcement, header, hero with the product, logos, features, pricing with a comparison, testimonials, FAQ, closing ask and footer.
12 components · Banner, SiteHeader, HeroSection, LogoCloud +8