Docs Components Blocks Pages

Sections

Introduction Components Installation MCP Theming

Components

Components Accordion AI Chat Input Alert Animated Group Animated Number Avatar Badge Beam Blur Fade Border Trail Breadcrumb Button Button Group Calendar Picker Card Chart Checkbox Collapsible Combobox Command Comparison Slider Context Menu Credit Card Data Table Date Picker Dialog Dropdown Menu Emoji Picker Empty Field Filters Full Calendar Glow Effect Input Input Group Input OTP Item Kanban Kbd Menubar Navigation Menu Novel Editor Pagination Parallax Progress Progressive Blur Radio Group Ripple Select Separator Sheet Skeleton Slider Sonner Spinner Spotlight Switch Table Tabs Text Effect Text Shimmer Textarea Toggle Toggle Group Tree Typography

Blocks

Pre-built UI patterns composed from Saturation UI components.

Authentication

Modern authentication form with email/password login and SSO options for Google and Apple.

Navigation

Collapsible sidebar component with logo, navigation menu, and user profile sections.

Data Display

An interactive credit card display with gradient themes, masked details, copy-to-clipboard, and spotlight effect.

A card component for displaying project information with a gradient background and context menu.

A folder-like component for organizing and displaying multiple projects in a grid layout.

A contact card with expandable details in a sheet, including personal info, notes, and attachments.

Forms

An overtime rate configuration component with base hours, multipliers, and column selection.

Widgets

A futuristic widget for displaying budget information with progressive blur and spotlight effects.

Productivity

AI agent chat interface with tool calling, file uploads, and step-by-step execution visualization.

Comments Sidebar

Collaborative comments sidebar with threading, resolve status, viewer tracking, and rich text input.

Interactive timeline view with draggable task bars for scheduling and project planning.

Spreadsheet Table

Interactive spreadsheet-style table with inline editing, grouping, badges, avatars, and totals.

Layout

Full site footer with link columns, social icons, compliance badges, and legal text.

Sticky/transparent header shell with logo, nav, and actions slots. Includes scroll detection.

Marketing

A styled FAQ section with expandable accordion items, custom plus/minus icons, and configurable heading.

Testimonial Carousel

An auto-advancing testimonial carousel with animated transitions, star ratings, avatar attribution, and progress dots.

An infinite-scrolling logo marquee with edge-fade mask and optional stats row. Perfect for social proof sections.

A responsive pricing section with billing toggle, plan cards, enterprise callout, and collapsible add-ons.

An infinite-scrolling poster/image marquee with edge-fade blur. Ideal for showcasing movie posters, client work, or portfolio pieces.

Animate On Scroll

Motion-powered scroll reveal wrapper with fade, slide, and scale variants. Includes stagger support for lists.

Feature Section

A family of 3 feature section variants (Split, Stacked, Cards) that share a common data interface. Mix and match across pages for visual variety.

Animated page header with title and description for directory/index pages.

Directory Toolbar

Search input with animated filter pills and sort dropdown for content directory pages.

Comparison Section

Before/after comparison with two staggered animated columns. Great for 'Without X / With X' marketing sections.

Diagonal Marquee

Infinite diagonal scrolling marquee with multiple rows of image cards moving in alternating directions.

Activity Ticker

An infinite-scrolling vertical feed of activity/transaction cards with status badges. Great for fintech, SaaS dashboards, and social proof sections.

A grid layout for showcasing product features with background illustrations, hover-reveal CTAs, and flexible column spans.