saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesign

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemSaturation Credit CardTableTree

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuSheet

Layout

Button GroupFont ProviderWizard Split Layout

Feedback

Sonner

Animation & Effects

Animated GroupAnimated ListAnimated NumberBeamBlur FadeBorder TrailGlow EffectLiquid MetalLoading StateParallaxPixelProgressive BlurRippleSpotlightText EffectText Shimmer

Productivity

Agent ChatAI Chat InputCoding AgentFiltersFull CalendarKanbanNovel Editor
Pages

Pages

Full page examples built by composing multiple blocks and UI components together.

Dashboard

Dashboard
New
A comprehensive dashboard with budget widgets, project cards, credit cards, and activity feeds.
BudgetWidgetCreditCard

Finance

Budget
New
Full-featured budget spreadsheet with views sidebar, column groups, filters, sorting, and inline editing.
SpreadsheetTableAppSidebarCommentsSidebarAgentChat
Credit Card
Credit card management page with balance tracking, rewards tiers, spending charts, and transaction history.
AppSidebar
My Saturation
Personal workspace hub with user cards, documents, payments, and transaction management.
AppSidebarCreditCard

Productivity

Chat
AI agent chat interface as a full-page experience with sidebar navigation.
AppSidebarAgentChat
Contacts
Contact management system with grid, kanban, and gallery views, plus detailed contact sidebar.
AppSidebarContactSidebar

Reports

Reports
Financial reports hub with links to various report types.
AppSidebar
Cashflow Statement
Track money flowing in and out of your production over time periods.
Profit & Loss
View revenue, expenses, and net income for selected time periods.
Actuals Report
See actual spending and transactions recorded against your budget.
Budget vs Actuals
Compare planned budget to actual spending with variance analysis.
Cost Report
Detailed breakdown of all costs by category, department, or project phase.
Expense Summary
Summarize expenses by vendor, category, or time period.
Period Comparison
Compare financial metrics across different time periods.
Custom Reports
WIP
Build and save custom reports with your own metrics and filters.

Onboarding

Onboarding
New
Customer onboarding flow for new Saturation users.
Onboarding Elements
New
Design system and component library for the onboarding flow.
Credit Card
New
Saturation Credit Card landing page with interactive 3D card, feature grid, perks carousel, and a Capitolis-style application flow.
Saturation Pay
New
Saturation Pay application flow for expense management enrollment.
Saturation Pay — Submitted
New
Status page shown after a Saturation Pay application has been submitted and is under review.
Saturation Pay — Started
New
Status page for an in-progress Saturation Pay application with a CTA to continue.
Credit Card — Approved
New
Credit approval status page showing approval amount and deposit step to unlock the card.
Vendor Onboarding
New
Vendor self-service onboarding wizard with type selection, contact details, document signing, bank details, and payment requests.