Scalar UI
Marketing UIApp UIAIChartsBackgrounds
Sign inGet started
Scalar UI
Scalar UI© 2026 Scalar Limited

React · Tailwind CSS · Motion

Browse

HomeAll components 213

Collections

Marketing UI 107App UI 94AI 16Charts 45Backgrounds 2Text 43

More

Text 43

Marketing UI

All Marketing UI 107
Visuals 53
  • Agent Passport
  • Agent Pass
  • Ticket Tear
  • Iso Stack
  • Integration Hub
  • Command Loop
  • Dotted Globe
  • Rolling KPI
  • Uptime Bars
  • Dither Field
  • Compare Slider
  • Deploy Pipeline
  • Live Cursors
  • Chat Thread
  • Kanban Shuffle
  • Toast Stack
  • Bar Race
  • Radial Gauge
  • Envelope
  • Edge Cloud
  • Pricing Slider
  • Theme Flip
  • File Drop
  • Sankey Flow
  • Bar City
  • Topographic Lines
  • Terminal Run
  • Calendar Drop
  • Encryption Scramble
  • Service Graph
  • Contribution Heatmap
  • Permission Toggles
  • Donut Breakdown
  • Live Line
  • Load Balancer
  • Pixel Lock
  • ASCII Torus
  • Terrain Flyover
  • Form Autofill
  • Compute Chip
  • Webhook Timeline
  • Org Tree
  • Funnel Flow
  • Latency Histogram
  • Diff Loop
  • Mesh Gradient
  • Payment Card
  • Product Tour
  • Expand Grid
  • Inference
  • Server Racks Isometric
  • Server Racks
  • Live Activity Map
Bento 1
Hero 6
Features 7
Pricing 6
Social Proof 16
CTA & FAQ 9
Headers & Footers 3
Mockups 2
Kit 3
Landing pages 1

Resources

Docs & installScalar Design
Marketing UIVisualsExpand Grid
Section

Expand Grid

A small grid whose tiles open in place. A tile grows to fill the grid while the others step back, shows its details, then folds back into its spot. Click any tile to open it.

Sign in to copy the source code

A free account unlocks source, prompts, the CLI, shadcn registry and MCP.

Sign in to copyCreate account

Dependencies

motionlucide-react

Category

Visuals

Tags

bentoexpandshared layoutgridfeaturesinteractive

Stack

React · TypeScript · Tailwind v4 · Motion

Updated

Oct 23, 2026

Examples

Workspace

Everything in one place