All visual compositions

Search and explore animated, copy-paste coded illustrations across 28 categories. Click any one to preview all of its variations, install through the shadcn registry, or copy it.

Activity

Feed

A live activity feed with avatars, actions, and relative timestamps.

Timeline

A vertical activity timeline of grouped events and status changes.

AI

Agent Flow

An agent pipeline of stacked isometric cubes that light up in sequence, revealing each step label as it runs.

Presence

Live multiplayer cursors roaming a shared canvas, one carrying your avatar and the rest labeled AI agents, over an ambient glow and particle field.

Prompt Box

A wide prompt composer with a typing prompt, model picker, token count, and send, over an ambient glow and particle field.

Retrieval

A query fanning out to ranked source cards that light up as each pulse lands, then converging into a streamed answer, over an ambient glow and particle field.

Voice

A realtime voice assistant orb that cycles through listening, thinking, and speaking states, with pulsing rings, a live equalizer, a status pill, and a transcript, over an ambient glow and particle field.

API

Logs

Service nodes streaming into a log console along connected paths, with severity-colored level chips and rows that tail in.

Request

A request arcing from client to server and a response arcing back, with a method pill, a status code, and a JSON response card.

Webhook

A webhook event fanning retry arcs at your endpoint, where failed attempts fall short and the successful one delivers.

Avatars

Grid

A grid of user avatars with subtle staggered reveals.

Stack

An overlapping avatar stack with a remaining count badge.

Profile Card

A compact profile card with avatar, name, and key stats.

Branding

Spotlight

An app icon spotlit over a fading dock of placeholder apps, with ambient glow and a particle field.

Browser

Loading

A browser window mockup with an animated page loading state.

Simple

A clean browser window frame for showcasing any screenshot or UI.

Tabs

A browser window with switching tabs and an address bar.

Calendar

Date Picker

A calendar date picker with a selected day and range highlight.

Event List

An agenda style list of upcoming calendar events.

Month View

A full month calendar grid with events placed on days.

Charts

Bar

An animated bar chart with a value, trend badge, and grid.

Donut

An animated donut chart with a center total and legend.

Line

An animated line chart with a value, trend badge, and gradient fill.

Sparkline

A compact inline sparkline for tight spaces and stat cards.

Chat

AI Chat

An AI chat interface with streaming responses and a prompt box.

Bubbles

A conversation of chat bubbles between two people.

Thread

A threaded message view with replies and reactions.

Code

Editor

A code editor mockup with syntax highlighting and a file tab.

Snippet

A copyable code snippet card with a language label.

Terminal

A terminal window with a typing command and output.

Connections

Converge

Multiple sources converging into a single destination node.

Flow

An animated flow of nodes connected by data paths.

Pipeline

A linear pipeline of stages with moving progress.

Sync

Two systems syncing with data moving back and forth.

Data

Table

A data table with sortable columns, rows, and status pills.

Dashboard

Mini Panel

A compact dashboard panel with a metric and mini chart.

Widget Grid

A grid of dashboard widgets and summary cards.

Devices

Laptop

A laptop device frame for presenting a screenshot or UI.

Phone

A phone device frame for showcasing a mobile screen.

Tablet

A tablet device frame for showcasing an app or page.

Email

Compose

An email compose window with recipient, subject, and body.

Inbox

An email inbox list with senders, previews, and unread states.

Files

Explorer

A file explorer with a folder tree and file list.

Simple

A simple file card with name, type, and size.

Stacked

A stack of overlapping file cards with depth.

Upload

A file upload area with progress and drag and drop.

Geo

Globe

A rotating globe of dotted continents with location markers and connection arcs that draw in.

Pin Drop

Location pins dropping onto an abstract radar field with concentric ripple pings.

Images

Carousel

An image carousel with slides and navigation controls.

Gallery

A responsive image gallery grid with hover states.

Integrations

Hub

A central app connected to surrounding integration logos.

Logo Orbit

Integration logos orbiting a central brand mark.

Keyboard

Half

A half keyboard showing a key combination press.

Shortcut

A keyboard shortcut rendered as labeled keycaps.

Media

Audio Waveform

An audio player with an animated waveform and controls.

Video Player

A video player frame with controls and a progress bar.

Metrics

Comparison

A before and after metric comparison with deltas.

Stat Card

A single stat card with a value, label, and trend.

Trend

A metric with a trend line and period over period change.

Notifications

Bell

A notification bell with an unread badge and pop.

List

A list of notifications with icons and timestamps.

Toast

An animated toast notification that slides in.

Payments

Checkout

A checkout summary with line items and a pay button.

Credit Card

A credit card visual with brand, number, and chip.

Usage Meter

A metered billing summary with a usage bar against quota, itemized metered charges, and an estimated total.

Sections

Auth

A login section with social buttons, fields, and a sign-in button.

Bento

A bento grid section with a featured tile and mixed-size cards.

Blog

A blog index section with article cards and metadata.

Blog Post

A blog post layout with title, meta, and content.

Comments

A comments thread with avatars, replies, and votes.

Components

A showcase grid of UI components and building blocks.

Contact

A contact section with a form and details.

CTA

A call to action section with heading and buttons.

Error

An error state section with code, message, and action.

FAQ

A frequently asked questions section with expandable items.

Features

A features section with icons, titles, and descriptions.

Footers

A marketing footer with brand, links, and socials.

Headers

A marketing header with navigation and actions.

Hero

A marketing hero section with heading, copy, and buttons.

Logos

A logo cloud of customer or partner brands.

A newsletter signup section with an email input.

Pricing

A pricing section with plan cards and features.

Process

A step by step process section with numbered stages.

Stats

A stats section highlighting key numbers.

Team

A team section with member cards and roles.

Testimonials

A testimonials section with quotes and authors.

Timeline

A timeline section of milestones and dates.

Security

Fingerprint

An animated fingerprint scan with a success state.

Lock

A lock visual conveying security and access control.

Shield

A shield visual conveying protection and trust.

Status

Health Check

A service health check with status indicators.

Uptime Bar

An uptime bar showing daily operational status.

Tasks

Checklist

A checklist with items completing one by one.

Kanban

A kanban board with columns and draggable cards.