Component Gallery
38 components across 10 categories
Design Tokens
3 componentsColors
Brand CSS custom properties
Typography
Font scale and weights
Spacing & Radius
Common patterns
Actions
4 componentsButton
10 variants, 4 sizes. Radix Slot support.
Button + Icon
Common button compositions
Chat Input
Expandable textarea with mode toggle and attachments
Search Input
Standard search pattern used across pages
Feedback & Loading
7 componentsAlert
5 variants for status messages
Default
This is a default alert message.
Success
This is a success alert message.
Warning
This is a warning alert message.
Info
This is a info alert message.
Destructive
This is a destructive alert message.
Toast
Auto-dismissing notification (success, error, info)
Spinner
3 sizes, 3 colors
FuturisticLoader
4 variants: default ring, minimal shimmer, button dots, dots with text
FuturisticThinking
Letter-shimmer pill with cycling words and elapsed timer
PageLoader
3 variants: page (full-screen), section (centered), inline (shimmer text)
Progress
Radix UI progress bar
Overlays
2 componentsDialog
Radix UI modal with animated open/close
SparkleText
Animated sparkle particles around text
Agent UI
3 componentsToolCard — Running
Live tool execution with progress, logs, and elapsed time
ToolCard — Done
Completed tool with formatted result
{
"formatted": "File contents loaded (2.4KB)"
}ToolCard — Error
Failed tool with error message
Status & Indicators
4 componentsStatus Dots
Agent and system health indicators
Badges
Inline status labels and tags
Task Status Row
Inline task with status icon and timestamp
Usage Meter
Credit balance and consumption indicator
Patterns
5 componentsChat Messages
User and assistant message bubbles
Agent Card
Fleet-ready agent status card
File Tree
Hierarchical file browser pattern
Empty State
No-data placeholder pattern
No agents yet
Create your first agent to get started
Keyboard Shortcuts
Hotkey hint pattern used in inbox, search
Landing Visuals
2 componentsActivity Timeline
Daily activity feed pattern from landing zigzag
Lava Orb
Hero animated gradient sphere
Current Copy
6 componentsHero
Landing page headline
Atris
AI agents that access tools like Gmail, Calendar, etc to help you manage everything important in life.
Zigzag Blocks
Feature section headlines
Track what you do, what you learn, and what matters. Your agent remembers so you can focus.
Your knowledge, organized and searchable. Feed your agent what it needs to help you.
Better context means better answers. Your team gets smarter as you use it.
Starters
Agent starter cards
Goal: To improve myself — Skills: Understanding your thoughts, Proactive with tasks, Regular checkins
Goal: To grow my business — Skills: Go-to-market operations, Product feature design, Creative strategy
Goal: To build better products — Skills: Writes product specs, Designs features with you, Guides your coding agents
Closing CTA
Bottom call-to-action
Ready to try it?
Start building with Atris
An AI workspace that thinks with you, remembers everything, and gets better overnight. Free to start.
Get Started
Agent Steps
Landing page agent conversation sequence
Sidebar Labels
Current navigation labels in SidebarV2