React Dashboard UI
React Dashboard Components & UI
Production-ready React dashboard components for SaaS products, AI applications, analytics, billing, workspace management, and modern web applications. Build complete dashboard experiences without starting every screen from scratch.
SaaS Dashboard Components
React UI for the screens modern SaaS products need: data tables, workspace management, billing, navigation, activity, and productivity workflows.
Agent Workspace
Full AI agent screen from task to summary.
Agent Run Status
Live status bar for a running AI agent.
Task Plan
AI agent plan as steps that tick off live.
Tool Call
Card showing an agent tool call and its result.
Approval Request
Human approval step before an AI agent acts.
Agent Timeline
Step-by-step timeline of an agent run.
Run History
List of past agent runs with status and cost.
Run Summary
Summary card at the end of an agent run.
Agent Settings
Settings form for an AI agent and its tools.
Failure Recovery
Failed agent run with retry and recovery options.
Agent Execution Graph
Graph view of an agent run and its branches.
Trace Waterfall
Waterfall trace of every call in an agent run.
Run Replay
Replay a recorded agent run step by step.
Agent Permissions
Manage what an AI agent is allowed to do.
Dry-Run Preview
Preview every change an agent will make.
Agent Inbox
Inbox of background agent tasks awaiting you.
Agent Ledger
Everything an agent changed, each change with its before, after and an undo.
Fan-out Grid
One job split across many workers, every task a cell on a live grid.
Agent Queue
The work waiting for your agents: worker slots, the line behind them and the backlog.
Workflow Builder
A node canvas for agent workflows that refuses broken wiring as you draw it.
Plan vs Actual
An agent's plan and its real run as two lanes on one clock, with a pace dial and a finish time that rolls over.
Fallback Chain
A request passed from model to model like a relay, with why each one failed and a receipt for the detour.
Conflict Radar
Parallel agents drawn as a minimap of each file, with the lines where their changes collide marked before merge.
Decision Tree
An agent stuck at a fork lays the whole decision out as a tree: options, the follow-up each one leads to, and the path you pick lit end to end.
Scheduled Runs
Agent work packed into usage windows: each day a track as long as its limit, big tasks torn across days, rearranged by dragging.
Env Variables
Environment variables per environment, write-only values, and a reminder to redeploy.
Notification Preferences
What reaches you and where: a switch per notice and channel, and a pause with an end.
Agent Steering
Send corrections to an agent while it runs.
Autonomy Dial
Control how much an AI agent may do alone.
Scoped Permission Grant
Allow an agent action once, for an hour or always.
Model Picker
AI model selector with cost per reply.
Prompt Library
Saved prompt templates with fill-in blanks.
Inline Diff
Accept or reject AI text edits inline.
Sub-agent Tree
Live tree of an orchestrator and its sub-agents.
Delegate Board
Drag tasks onto AI agents to assign them.
Agent Lanes
Multi-agent timeline with one lane per agent.
Agent Email Draft
AI-written email to review, retone and send.
Code Diff View
Code diff of agent changes with accept and reject.
Web Search Results
Live list of pages an agent is searching.
Agent Cursors
Named cursors for AI agents editing a document.
Editable Table
Spreadsheet-style editable table with undo and save.
Filter Builder
Visual filter builder for data tables.
Saved Views
Saved, shareable views above a data table.
Data Import
CSV import with column mapping and fixes.
Payments Table
Payments table with status tabs and refunds.
Orders Table
Orders table with status and expandable line items.
Customers Table
Customers table with MRR, plan and churn risk.
API Keys Table
API keys table with scopes, usage and revoke.
Audit Log Table
Audit log table with filters and export.
Deployments Table
Deployments table with status and redeploy.
Feature Flags Table
Feature flags table with rollout and toggles.
Support Tickets Table
Support ticket queue sorted by SLA.
Top Pages Table
Top pages table with traffic share and change.
Inventory Table
Inventory table with stock levels and reorder points.
Leaderboard Table
Leaderboard table with ranks, medals and streaks.
Member Card
Team member row with role and actions.
Members Table
Team members table with search and bulk actions.
Access Request Inbox
Approve or deny access requests.
Roles & Permissions Matrix
Roles and permissions matrix.
Access Review
Periodic access review for team accounts.
Seat Usage & Limits
Seat usage meter with pending invites.
Team Switcher
Workspace switcher showing your role in each.
Transfer Ownership
Safe transfer of workspace ownership.
Activity Feed
Live team activity feed grouped by day.
Integration Picker
Search and connect app integrations.
Integration Settings
Settings card for one connected integration.
App Directory
Searchable directory of app integrations.
Setup Guide
Onboarding checklist for new accounts.
Profile Menu
Account menu behind the user avatar.
Comment Thread
Comment thread with replies, mentions and resolve.
Settings Page
Settings page with sections, search and save bar.
Subscription Status
Subscription status card for every plan state.
Plan Picker
Plan picker that shows the exact charge.
Invoice History
Invoice history with the next invoice estimate.
Payment Methods
Saved cards with expiry and renewal warnings.
Payment Recovery
Failed payment recovery with retry timeline.
Usage & Overage
Usage meter with projected overage cost.
Cancel & Downgrade
Clear, honest cancel subscription flow.
Receipt
Printable payment receipt with refunds.
Checkout
Checkout form with tax and discount code.
Billing Schedule
Build contract billing phases and invoices.
Invoice + Credit Note
Invoice with a credit note side by side.
Kanban Board
Drag-and-drop kanban board with cards.
Event Calendar
Month, week, day and agenda views with drag, resize and create, in any time zone.
Gantt
A project schedule with dependencies that push each other when you drag.
Notification Panel
Notification panel with filters and read state.
Tabs
Tabs with counts, segmented or underlined.
App Shell
App layout with sidebar and top bar.
Sidebar
Collapsible sidebar navigation.
Pagination
Pagination with page numbers.
Stepper & Wizard
Stepper and multi-step wizard.
Accordion
Accordion for collapsible sections.
Tree View
Tree view for nested folders.
Resizable Panels
Resizable split panes.
Breadcrumb
Breadcrumb navigation that folds long paths.
Animated Navbar
Animated website navbar with dropdowns.
Floating Dock
macOS-style floating dock.
Data Table
Data table with sorting, search and pagination.
Charts
Area, bar and donut charts with KPI cards.
Line Chart
Line chart for trends over time.
Composed Chart
Combined bar, line and area chart.
Radar Chart
Radar chart for comparing measures.
Radial Chart
Radial progress and share chart.
Histogram
Histogram with p50, p95 and p99 markers.
Cohort Retention
Cohort retention table.
Calendar Heatmap
GitHub-style calendar heatmap.
Insight Cards
KPI card with trend and AI insight.
Feedback Widget
Feedback widget with NPS, emoji or stars.
Badge
Status badges in seven colours.
Empty States
Illustrated empty states.
Empty & Loading States
Empty, error, success and loading states.
Alert
Inline alert in five tones.
Progress Bar
Progress bar.
Progress Circle
Circular progress ring.
Dashboard
Complete analytics dashboard screen.
Breakdown Chart
Stacked bar chart with breakdown table.
Compact Breakdown
Small card splitting a total into parts.
Change Summary
What changed since last time, by metric.
Experiment Card
A/B test result card.
Avatar Stack
Avatar and overlapping avatar group.
Kbd
Keyboard shortcut key.
Undo Pill
Undo toast with countdown.
Reaction Bar
Like, comment and share bar.
Timeline
Vertical timeline with scroll progress.
Carousel
Swipeable carousel slider.
Swipe to Delete
Swipe-to-delete list row.
Infinite Scroll
Infinite scroll list with loading states.
Stacked Cards
Stacked notification cards that fan out.
Image Compare
Before and after image comparison slider.
Theme Toggle
A light and dark switch, or light, dark and system, with the new theme spreading out as a circle.
Sortable List
A list you reorder by dragging its handles or with the keyboard, with every move undoable.
Loaders
Seven small loaders and a hook that stops quick replies from flashing a spinner.
Build AI and analytics dashboards faster
Liro combines React, Tailwind CSS, accessible interactions, and production-ready states for dashboards used in AI products, SaaS applications, analytics tools, billing systems, and team workspaces.