Agent Plan
Use when a person should reorder or retry steps before the run finishes. Skip it for a single tool call.
Plan
2 of 4 doneRead the ticket
Done1.2sOrder 1842
Check the refund policy
Done3.4sDraft the reply
Running2.1sSend the email
PendingWaits for approval
Install
npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-plan"Props
stepsโ { id, title, detail?, status, elapsed? }[]. status is pending, running, done, or failed.onReorder(steps)โ Called after a step moves up or down.onRetry(id)โ Shown on a failed step.titleโ Optional heading. Default is Plan.
After you install it, change the copy and the data. Keep the styles.
Approval
Use when an action leaves the product, such as sending email or issuing a refund. Allow it once, always, or deny it.
Approval
Send the refund email
Emails Avery Chen and marks order 1842 as refunded.
To: avery@example.com Your refund of $86.00 is approved.
Install
npx shadcn@latest add "https://ai-elements.solokit.run/r/approval"Props
requestโ { title, description, risk, preview? }. risk is low, medium, or high.decisionโ once, always, deny, or null.onDecide(decision)โ Called when the person chooses.
After you install it, change the copy and the data. Keep the styles.
Trace
Use for one whole run: model calls, tools, and time. A single tool card is enough when there is only one call.
Trace
6.9s- 1.2s
read_ticket
Tool ยท Done
- 3.4s
policy lookup
Model ยท Done ยท 860 tokens
- 2.1s
draft reply
Model ยท Done ยท 420 tokens
- 200ms
send_email
Tool ยท Pending
Waiting for approval
Install
npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-trace"Props
spansโ { id, name, kind, status, durationMs, tokens?, detail? }[].kindโ llm, tool, or agent. status is pending, running, done, or error.titleโ Optional heading. Default is Trace.
After you install it, change the copy and the data. Keep the styles.
Inbox
Use for background tasks that need approve, reject, or retry. Open one task to see its run.
Inbox
2 tasks- Needs approval
Refund reply for order 1842
Refund agent ยท 6.7s
Waiting to send the email.
- Failed
Invoice reminder
Billing agent ยท 2.0s
The mailbox rejected the draft.
Install
npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-inbox"Props
itemsโ { id, title, agent, status, elapsed?, detail? }[]. status is running, needs_approval, done, or failed.onApprove(id), onReject(id)โ Shown only when a task needs approval.onRetry(id)โ Shown only after a failure.onOpen(id)โ Opens the task.
After you install it, change the copy and the data. Keep the styles.
Steering
Use to queue a note for the next unfinished step without stopping the run.
Steering
Notes wait for the next unfinished step.
Install
npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-steering"Props
notesโ { id, text, appliedTo? }[].onSubmit(text)โ Called with the trimmed note.placeholderโ Optional input text. Default asks for a note for the next step.
After you install it, change the copy and the data. Keep the styles.
Agent Tree
Use when a run has an orchestrator and the tools or sub-agents it started.
Agents
- 6.7s
Refund agent
Orchestrator ยท Running
- 3.4s
policy lookup
Model ยท Done
send_email
Tool ยท Pending
Install
npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-tree"Props
rootโ { id, name, role, status, elapsed?, children? }. status is pending, running, done, or failed.titleโ Optional heading. Default is Agents.
After you install it, change the copy and the data. Keep the styles.
Memory
Use for the facts a run is relying on. Forget one when it should not shape the draft.
Memory
3 factsCustomer
Avery Chen
From Ticket
Refund amount
$86.00
From Order 1842
Refund window
30 days
From Policy
Install
npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-memory"Props
factsโ { id, label, detail, source }[].onForget(id)โ Removes one fact from the run.
After you install it, change the copy and the data. Keep the styles.
Changes
Use to replay an edit the agent wants to make. Apply it, or put the previous value back.
Changes
- Proposed
Order 1842
Open โ Refunded
- Proposed
Refund email
Not sent โ Sent to avery@example.com
Install
npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-ledger"Props
changesโ { id, label, before, after, status }[]. status is proposed, applied, or reverted.onApply(id)โ Makes the new value stick.onRevert(id)โ Puts the previous value back.
After you install it, change the copy and the data. Keep the styles.
Autonomy
Use to choose whether the agent asks, waits on the send, or finishes the run alone.
Autonomy
Install
npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-autonomy"Props
valueโ ask, review, or auto.onChange(value)โ Called when the person picks a level.
After you install it, change the copy and the data. Keep the styles.
Conversation
Container with auto-scroll and scroll-to-bottom button
Message
User and assistant message bubbles with actions
I'll analyze your website's SEO performance. Here are the key metrics I found:
- Domain Authority: 45/100
- Organic Traffic: 12,500 visits/month
- Indexed Pages: 342
Data Card
Collapsible cards with multiple variants for different data types
Tool Invocation
Timeline-based tool execution display with status indicators
Loader
Loading states, skeletons, and streaming cursor
The AI is generating a response
Reasoning
Collapsible thinking/reasoning display for AI models
Sources
Citation and source reference components
Suggestions
Suggestion cards and quick-action prompts
Code Block
Syntax-highlighted code display with copy and download
1 import { Shimmer } from "@/lib/chatbot"; 2 3 export function LoadingState() { 4 return ( 5 <div className="flex items-center gap-2"> 6 <Shimmer duration={2}> 7 Loading content... 8 </Shimmer> 9 </div> 10 ); 11 }
Use the Shimmer component for loading states and Typewriter for text animation effects. Import them from @/lib/chatbot.
Web Preview
Link preview cards with OG image support
Shimmer
Animated text shimmer effect for loading states
Generating your SEO report...
Analyzing keywords...
Processing large dataset, please wait...
Loading Dashboard
Typewriter
Character-by-character text reveal animation
Actions
Message action bar with copy, like/dislike, share, stop/reload
Hover over this area to reveal the actions bar.
Inline Citation
Inline source citations with tooltips
React Server Components
Metric Card
KPI cards with trend indicator, percentage change, and icon slot.
Total Revenue
$48,295
Active Users
3,842
Bounce Rate
24.3%
Avg. Session
4m 32s
Stats Badge
Inline statistics badges with trend direction and dot indicator.
Status Indicator
Service status dot with pulse animation and semantic color variants.
User Avatar
User avatar with image, initials fallback, and status badge.
Avatar Group
Stacked avatar group with overflow count and hover tooltip.
Activity Feed
Timeline activity feed with avatar/icon/dot prefix types.
New user signed up
alice@example.com created an account
Payment processed
$249 subscription renewed
Deploy failed
Production deployment encountered an error
API rate limit warning
80% of monthly quota used
Mini Chart
Pure SVG sparkline charts (line/area/bar) without external dependencies.
line chart
area chart
bar chart
Progress Ring
Animated SVG circular progress ring with label and custom color.
Storage
75% used
CPU
42% load
Memory
90% used
Quota
33% used
Data Table
Sortable data table with striped rows, loading state, and empty placeholder.
Name | Plan | Status | Revenue |
|---|---|---|---|
| Acme Corp | Enterprise | Active | $12,400 |
| Globex | Pro | Active | $3,200 |
| Initech | Starter | Inactive | $480 |
| Umbrella Ltd | Pro | Active | $5,900 |
| Hooli | Enterprise | Active | $18,700 |
Filter Bar
Flexible filter toolbar with search, dropdowns, and clear all action.
Feature Card
Feature highlight card with icon, title, and description in three variants.
Simple Variant
Clean and minimal card without borders.
Bordered Variant
Card with a subtle border and hover shadow.
Gradient Variant
Card with a gradient background and glow.
Testimonial Card
User testimonial card with quote, author info, and star rating.
โThis product changed our workflow completely. The AI features are incredibly intuitive.โ
Alice Johnson
CTO, Acme Corp
โIncredible value for the price. Our team adopted it in less than a day.โ
Bob Smith
Product Manager, Globex Inc
Pricing Card
Pricing plan card with feature list, CTA button, and recommended variant.
Starter
For individuals
- 5 projects
- 10GB storage
- Community support
Pro
For growing teams
- Unlimited projects
- 100GB storage
- Priority support
Enterprise
For large orgs
- Everything in Pro
- SSO & SAML
- Dedicated support
Announcement Bar
Dismissible page-top announcement bar with multiple color variants.
New feature: AI-powered search is now available!
Learn more โSystem maintenance scheduled for Sunday, 2:00 AM UTC.
All systems operational. No incidents reported.
Form Field
Form field wrapper with label, helper text, and error message.
We'll never share your email address.
Password must be at least 8 characters.
Tag Input
Tag input with Enter/comma creation, color variants, and max count.
Blue tags
Green tags, max 3
Rating Input
Interactive star/heart/thumb rating with half-star support.
Search Input
Enhanced search input with clear button, loading state, and shortcut hint.
Slider Input
Range slider with single/dual-thumb mode and value display.
Single slider
Range slider
Color Picker
Color picker with preset swatches, hex input, and native color picker.
Toggle Group
Single/multi-select toggle group with icon and text modes.
OTP Input
6-digit OTP input with auto-focus, paste support, and error shake animation.
Type 123456 to verify (any other code shows error animation)
Date Picker
Calendar date picker with month navigation and disabled dates.
Multi Select
Multi-select dropdown with search, tag display, and select-all.
1 selected: react
Fade In
Fade + directional slide on viewport entry
Slide In
Spring-physics slide from any direction
Scale In
Scale + fade on viewport entry
Scale 1
Scale 2
Scale 3
Stagger List
Children enter with staggered delay
Count Up
Animated number counter on viewport entry
Revenue
Uptime
Users
Rating
Text Reveal
Word-by-word or character-by-character text animation
Words mode
Buildbeautifulinterfaceswithanimation.Chars mode
Poweredย byย Framerย Motion.Flip Card
3D flip with front/back faces โ hover or click
Hover
Click
Marquee
Infinite horizontal scroll with pause-on-hover
Orbit
Items rotating around a center element
Spotlight Card
Dynamic spotlight glow that follows the cursor
Hover to see the glow follow your cursor across this card.
Move your cursor around to see the dynamic spotlight effect.
Particle Burst
Colourful particles explode on hover or click
Floating Badge
Animated badge that springs into position over any element
Seamless Scroll
Infinite loop marquee scroll for logo walls, announcements, partner displays.
Title & Eyebrow
Dark theme heading with gradient accent and eyebrow subtitle component.
Build Faster with AI
Scale Your
Infrastructure Without Limits
SpanWrapper โ inline text composition:
on new line
Media Query Wrapper
CSS-based responsive wrappers for SSR-safe PC/Mobile conditional rendering.
hidden md:block / md:hidden) for SSR compatibility.Background Image Adapter
Responsive background image component that auto-switches between PC and mobile images.
Responsive Background
PC and Mobile images auto-switch at 768px
Uses CSS variable --bg-image / --bg-mobile-image with Tailwind responsive class.
Social Proof
Social proof widget with stacked avatars, user count, and rating.
12,000+ developers already use this