Bar chart
Bars that grow in one after another, with values and labels.
Components
Animated React components for your site. Download the source, or have Programmable make one like it about your product.
Donut chart
A donut that draws its segments in turn, with a centre total and legend.
Progress rings
Concentric rings that fill to each goal.
Funnel chart
A conversion funnel whose stages narrow in, with drop-off between them.
Score circle
A score that counts up as its ring fills, coloured by grade.
Live dashboard
Metric cards whose numbers tick up live, with trends.
Comparison battle
You against them, feature by feature, with a winner.
Comparison slider
Drag a divider to compare the old way with yours.
Pricing table
Plans that rise into place, with a highlighted favourite.
Before and after
The before state, the steps, then the after metrics.
Radar chart
A spider chart whose shape grows out from the centre before each point pops in.
Heatmap
An activity grid whose cells fade in cell by cell, shaded from quiet to busy.
Line chart
Lines that draw themselves left to right over a soft area fill, with a legend.
Stat card
A metric card whose number counts up while its sparkline draws beside the trend.
Sparkline
A compact trend line that draws itself, with a soft fill and a pulsing latest point.
Trend list
Metric rows whose up and down trend pills slide in one after another.
Headline stats
Big gradient numbers that count up when they scroll into view.
Live status
A status card with a pulsing live badge, service dots and a ticking viewer count.
Countdown
A launch or offer countdown whose digits flip as each second passes.
Confidence meter
An AI answer's confidence ring with per-claim bars that fill in, coloured low to high.
Token counter
AI token usage that climbs as a response streams, filling the context window and warning near the limit.
Thinking indicator
An AI working indicator that steps through thinking, searching, analysing and writing.
Comparison tabs
Switch between competitors with a sliding tab and see each feature marked yes, no or partial.
Flip comparison cards
Cards that flip on hover from your advantage to the competitor's limitation.
Metric face-off
Head-to-head metric bars that grow into view, ending in a win-rate summary.
Social proof banner
Star ratings and headline metrics that fade in, in default, compact or highlighted layouts.
Integrations grid
The tools you connect to as a staggered grid, grouped by category, or a minimal row.
Awards
Awards and certifications as a featured showcase, a grid, a year timeline or compact badges.
Testimonial card
A customer quote card that rises into view with the author's avatar, role and company.
Logo cloud
A grid of customer logos that fade in one by one and light up on hover.
Logo marquee
Customer logos scrolling in an endless CSS loop, in one or two rows, pausing on hover.
Confetti
A burst of confetti for a win moment, fired by a prop or the built-in button.
Process walkthrough
Steps that complete one after another with a progress bar and before-and-after metrics.
Spotlight tour
A guided product tour that dims the page and spotlights each element with a tooltip.
Tabbed demo
A step-by-step product demo whose visual swaps per tab and auto-plays through the steps.
Pricing card
A single plan card that rises into view, ticks in its features and lifts on hover.
Pricing with billing toggle
Plan cards with a monthly or annual switch that animates every price.
Problem hero
A hero that frames the problem with one big number, a gap to benchmark and a research quote.
Trust signals
Customers, ratings, awards, security badges and metrics combined in one trust section.
Case study results
A customer's results as springy metric cards, a hero number or a compact row.
Case study timeline
A customer's journey as phase cards along a line that fills as you scroll.
Web intelligence search
A search query types itself, the web is scanned step by step, and matching profiles stream in with a summary.
Email finder
A name and domain are entered, checks run one by one, and a verified email appears with its confidence score.
Smart share link
A prompt becomes a shareable link that generates a fresh file for whoever opens it.
Instant data URL
A URL with a plain-language prompt is typed into the browser, a file downloads, and its rows open in a table.
Privacy-first record
A record shows its public fields while private fields stay locked until a paid reveal passes each privacy check.
Shared network query
A SQL query runs in a console against a shared workspace and the result table prints out line by line.
Data marketplace
Several sellers offer the same record, the best one is picked, the record is revealed and the seller's earnings add up.
Upload and earn
A file uploads and is checked, earned credits count up, and the uploader climbs the leaderboard.
Chat assistant
A chat with an assistant plays out in a dark app window, with each tool call shown as it runs.
Daily summary run
A scheduled morning briefing gathers sales, sign-ups and inbox counts in turn and is delivered.
Invoice extraction
A stack of invoices is read one by one while clean spreadsheet rows fill in under a progress bar.
Connect your tools
A list of apps connects one after another, each switching to a green connected badge.
Win-back campaign
A typed request becomes a win-back email campaign that is drafted, couponed and sent, then shows its results.
How it works steps
Six numbered how-it-works steps fade up in turn as the section scrolls into view.
Feature grid
A grid of feature cards with icons fades up in a quick stagger as the section scrolls into view.
AI agent console
An autonomous agent works through a task list while its thoughts and tool calls stream into a log and each step lands with a result.
Agent swarm
Four agents hand work down a pipeline in parallel, each filling its progress bar while a message bus narrates the hand-offs.
Prompt pipeline
A plain-English request types itself, service nodes light up in turn as their logs stream, and the run's metrics land at the end.
Assistant chat with tools
A looping chat where the assistant calls tools between replies, with tool chips and a typing indicator.
Domain research scan
A domain types itself into a terminal, a swarm of research agents runs in sequence, and a row of dots fills as data points pile up.
Data enrichment table
Bare email addresses fill in column by column as each data source answers, with a live confidence score per row.
Content flywheel
One long recording is cut into clips, the clips fill an output grid, and each channel lights up as they are posted.
Outreach sequence
Invitations go out one by one, then prospects accept, reply and book meetings while the funnel counters climb.
Onboarding story
A five-beat product story in a browser frame, from typing in a website to waking up to results.
Referral cascade
One share becomes many as each generation indents under the last while total reach and the growth coefficient climb.
Usage receipt
A job runs step by step in a terminal while a receipt prints below it, each line adding its credits to a running total.
Live activity feed
A compact happening-now card where new activity slides in at the top and the oldest row slides out.
React + Tailwind CSS. Each file lists what to install. Use downloads in your own sites and products; please don't resell them as a component library. Repeat downloads of the same component in a month are free.