Color
The full palette and semantic tokens.
Tapp UI
Thoughtful components for working with agents.
See the components in an agent workflow
From request
to review.
A request, a clear next action, and room to review. See the system working together.
Explore the composerShift assistant
Draft only · approval required
Prepare a handoff for the evening team.
Read the shift notes, organize the open tasks, and prepare a summary for your review.
Interactive example. Requests and approvals stay in this preview.
Foundations
2The tokens everything else is built on.
View Color
Typography
Type scale, weights, and text styles.
Base
56The everyday building blocks.
Badge
Counter and status pills.
Keyboard Hint
Keyboard shortcut hints.
Status Dot
Compact availability indicator.
Checkbox Card
Selectable option card with checkbox.
Radio Card
Single-choice option cards.
Switch Card
Settings row with toggle.
Date Range Picker
Two-month date range selection.
Meeting Scheduler
Date and time-slot scheduling.
Toast
Interactive component preview.
Time Field
Interactive component preview.
Tag Group
Interactive component preview.
Spinner
Interactive component preview.
Skeleton
Interactive component preview.
Search Field
Interactive component preview.
Progress
Interactive component preview.
Popover
Interactive component preview.
Number Field
Interactive component preview.
Modal
Interactive component preview.
Meter
Interactive component preview.
Drawer
Interactive component preview.
Date Calendar
Interactive component preview.
Context Menu
Interactive component preview.
Command Palette
Interactive component preview.
Combobox
Interactive component preview.
Color Picker
Interactive component preview.
Accordion
Interactive component preview.
Announcement
Dismissible banner for product news.
Avatar
User photos or stable bot avatars in Tapp colours.
Breadcrumb
Path trail with collapsing levels.
Button
Primary, secondary, and danger actions.
Button Group
Fused row of selectable buttons.
Carousel
Slide through cards with snap, arrows and dots.
Checkbox
Animated tick, card variant, two sizes.
Chip
Compact removable filter tokens.
Close Button
The little ×, done properly.
Date Picker
Popover calendar for single dates.
Divider
Single, double, and filled content separators.
Dropdown
Composable menus - teams, models, actions.
File Upload
Drag, validate, and track upload progress.
Icon Button
Square action button, icon only.
Input
Text field with addons and validation.
Input OTP
One-time-code boxes with paste and autofill.
Link Button
Inline text action styled like a link.
Notification
Status messages with icons, avatars, and actions.
Pagination
Page numbers with truncation.
Radio
Gradient dot, card variant, two sizes.
Segmented Control
Sliding pill option switcher.
Select
Single-choice listbox with search.
Slider
Single-value and min/max range selection.
Social Button
Sign-in buttons for 24 providers, logos included.
Switch
On/off toggle with spring motion.
Table
Sortable columns, sticky header.
Tabs
Underline and pill tab lists.
Textarea
Multiline field with auto-grow and character count.
Tree View
Nested folders with selection and keyboard navigation.
Tooltip
Positioned hints on hover and focus.
Blocks
26Larger assemblies, ready to drop in.
Composer
Prompt, attachments, model, voice recording, and send controls.
Agent Avatar
Nine original silhouettes with expressive faces.
Agent Log
Shared reveal and streaming log behavior.
Theme Toggle
Persistent light and dark appearance.
Patient Info
Profile summary and detail rows.
Important Alerts
Scrollable dated activity feed.
App Shell
Responsive sidebar and page frame.
Agent Chat
Streaming chat using a configured provider.
Agent Thinking
Agent thinking indicators for chat composers.
Composer Loader
Orbiting light band for a working composer.
Composer Panel
Two-row chat input with permission modes.
Composer Attachments
File tiles landing one by one above the prompt.
Auth Card
Sign-in and sign-up blocks with social login.
Web Search
Research trail with the sources an agent opened.
Task List
Streaming agent log that reveals step by step.
Agent Limits
Context window and plan usage limits.
Questionnaire
Plan-mode questions, one step at a time.
Agent Creator
Create an agent’s identity, animated avatar, and voice preferences.
Agent Progress
Collapsible progress for multi-step AI tasks.
Calendar
Full month view with event pills.
Data Grid
Editable spreadsheet with selection, filters, and live summaries.
Data Table
Filters, selection, and pagination wired up.
Notification Center
Grouped activity inbox with tabs and actions.
Settings Modal
Multi-page settings in a controlled dialog.
Sidebar
Floating app navigation with teams menu.
Stat Cards
KPI cards with delta chips or a footer band.
Charts
19Data cards for dashboards.
Orders Chart
Monthly orders with a comparison series.
Revenue Chart
This year against last, area over a dashed line.
Activity Rings
Concentric progress rings, Apple style.
Area Chart
Stacked, overlapping or 100% area series.
Bar List
Ranked breakdown rows with share bars and tabs.
Combo Chart
Bars and a line on independent axes.
Contributions
GitHub-style activity heatmap.
Earnings Chart
Bar chart with period comparison.
Funnel Chart
Flow funnel with tapered stages and conversion pills.
Heatmap Chart
Matrix heatmap with a theme-following ramp.
Most Active Days
Weekday bars linked to the rings.
Radar Chart
Filled, dotted, lines, and score radars.
Radial Chart
Rings, gauges, and a stacked half gauge.
Line Chart
Curved or sharp line over a soft area.
Sankey Chart
Flow diagram with tinted links and shares.
Scatter Chart
Correlation dots, bubbles when sized.
Sleep Score
Radial gauge with score breakdown.
Stage Bars
Funnel stages as rounded horizontal pills.
Steps Chart
Daily steps with goal marker.
Templates
14Complete screens, wired together.
Team Dashboard
Hiring funnel, engagement, team breakdown, and review table.
Chat Starter
Free, deployable chat on your own model key.
Multi-agent Chat
Animated agents, individual and group chat, and a live avatar editor.
AI Chat
Full chat app with code panel and composer.
AI Image Generation
Prompt thread with generation frame and gallery panel.
AI Profile
Contributions profile with heatmap and charts.
Finance Dashboard
Cash-flow sankey, spending rings, and transactions table.
Home Dashboard
KPIs, revenue trend, and customers table.
Marketing Dashboard
Acquisition funnel, spend charts, and campaigns table.
Medical Profile
Patient overview with health charts.
Project Board
Kanban workspace with ticket panels, comments, and token charts.
Workspace Search
Search documents, explore an answer and inspect its sources.
Staff
Staff directory with search, contact details, tips summary and local invitation management.
Money
Payout balances, schedules and activity with interactive sample data.