15 blocks · copy or install

Production-ready UI blocks

Every preview below renders the real @coloxo/ui components. Open a free block to copy its source — no wrapper layer and no lock-in.

npm install @coloxo/ui

15 blocks

Aurora SaaS Hero
Hero Sections
Oversized headline, dual calls to action, trust signals, and a live aurora background for developer-tool launches.
Coloxo UI v2 · 60 components
Beautiful interfaces, built your way
A React component library for product teams — accessible primitives, data views, motion and WebGL effects, all on one design token system.
AKJTMRSO
Trusted by 2,400+ product teams
dashboard.tsx
Live
Build time
41s
82%
Accessibility
Passing
Keyboard paths
Focus rings
Tree-shaken bundle
18.4 kB
Powering interfaces at
Northwind
Lumen
Pacer
Orbital
Halcyon
CenteredLeft aligned
Open block
Bento Feature Showcase
Features
Asymmetric bento grid with one wide telemetry card, quota meters, and a capabilities tile.
Platform
One system for every surface you ship
Observability, data views, and motion primitives built on the same tokens — so a dashboard and a marketing page never drift apart.
Realtime telemetry
Percentile latency straight from the edge, refreshed as traffic lands.
Live
p50
p95
Latency by day in milliseconds — data
Category p50 p95
Mon 38 ms 62 ms
Tue 34 ms 58 ms
Wed 41 ms 71 ms
Thu 30 ms 52 ms
Fri 28 ms 47 ms
p50
31 ms
19%
faster than last period
p95
54 ms
12%
faster than last period
Budget guardrails
Usage limits surface before a bill does.
API requests6.8M of 10M
68%
Storage340 GB of 1 TB
34%
Team seats182 of 200
91%
New
60 primitives, one import
Every component ships typed props and a documented API — no wrapper layer to learn.
Composable slots
CSS variables
WCAG reviewed
Reduced motion
Components adopted
48of 60
+12
across 4 products this quarter
80%
80% of the library in production
EditorialCompact
Open block
Executive Analytics Dashboard
Dashboards
Four KPI cards, revenue-versus-target bars, a channel donut, and a recent activity feed.
Executive overview
183-day window · revenue in USD
Revenue
$1.05M
16%
Trailing six months
Active accounts
3,482
8%
312 new this month
Net revenue retention
114%
3%
Expansion outpacing churn
Gross margin
78.4%
2%
Infra spend up 6%
Revenue vs. target
$1,052,000 booked against $1,015,000 plan
Revenue
Target
Monthly revenue against target — data
Category Revenue Target
May $148k $150k
Jun $162k $158k
Jul $155k $165k
Aug $181k $172k
Sep $194k $180k
Oct $212k $190k
Revenue by channel
$1,052,000 total · largest slice is 39%
Direct
Partner
Self-serve
Marketplace
Revenue by acquisition channel — data
Category Value Share
Direct $412,000 39.2%
Partner $286,000 27.2%
Self-serve $214,000 20.3%
Marketplace $140,000 13.3%
Recent activity
Amara Kadeclosed Enterprise renewal12m agoNorthwind · $148,000
Jonas Terrellexpanded the platform plan54m agoLumen · +42 seats
Mei Rutherfordflagged an at-risk account2h agoPacer · usage down 31%
Sam Okaforapproved a discount request4h agoOrbital · 12% off
StandardWide
Open block
Pricing Plans Comparison
Pricing
Three tiers with a working monthly and annual switch; every price derives from one discount constant.
Simple pricing that scales with your team
Every plan includes the full component set. Upgrade only when you need governance, SSO, or seat volume.
Monthly
AnnualSave 20%
Starter
Up to 3 seats
$15/seat/month
Billed annually · $180/seat/year
For side projects and early prototypes.
Components · All 60
Blocks · 5
SSO / SAML
Audit log
Growth
Up to 20 seats
Recommended
$39/seat/month
Billed annually · $468/seat/year
For teams shipping to production.
Components · All 60
Blocks · All 15
SSO / SAML
Audit log
Scale
Unlimited seats
$79/seat/month
Billed annually · $948/seat/year
For orgs that need governance and SSO.
Components · All 60
Blocks · All 15
SSO / SAML
Audit log
CardsWith comparison
Open block
AI Assistant Workspace
AI Interfaces
Conversation history, distinct user and assistant bubbles, suggested prompts, and a working composer.
Checkout reliability review
Online
4 messages · demo mode, no model connected
AK
You10:02
Our checkout retries three times and still fails on flaky connections. Can you review the retry strategy in `paymentClient.ts`?
CX
Coloxo assistant10:02
The current code retries immediately and reuses the same idempotency key, so a timeout can double-charge before the retry lands. Three changes would help: keep the idempotency key stable per attempt group, back off exponentially with jitter, and stop retrying on 4xx responses since those never succeed on repeat.
AK
You10:04
What backoff numbers do you recommend for a payments API?
CX
Coloxo assistant10:04
Start at 300 ms and double up to a 5 s ceiling, with ±20% jitter, capped at four attempts. That keeps the worst case near 15 s — inside most gateway timeouts — while jitter stops a fleet-wide retry wave from hitting the provider at the same instant.
Suggested prompts
Demo only — messages stay in this page and are never sent anywhere.
StandardWith history drawer
Open block

Project Management Overview

Project Management

Project status, team, task completion, milestone risk, and a filterable priority task table.

Platform migration

At risk

Q1 · 18 tasks · due Apr 2

AKJTMRSD+1

Tasks complete

7/18

39%

3 landed this week

39%

Open blockers

schema sign-off is the critical path

Team capacity

86%

5 engineers, 1 on leave

86%

Priority tasks

Priority tasks
Task	Title	Status	Priority	Owner	Due
PLT-142	Migrate billing webhooks	In progress	High	AK	Mar 14
PLT-139	Replace legacy auth guard	Review	High	JT	Mar 12
PLT-137	Ship usage dashboard	Done	Medium	MR	Mar 08
PLT-134	Blocked: schema sign-off	Blocked	High	SD	Mar 11
PLT-130	Rate-limit edge proxy	In progress	Medium	AK	Mar 18

Upcoming milestones

Beta cutMar 12
At risk
Security reviewMar 19
On track
GA launchApr 02
On track

SummaryWith activity

Open block

Customer CRM Pipeline
CRM
Four-stage deal board and an equivalent table view over one dataset, with owner filtering.
Sales pipeline
8 opportunities · 62% historical win rate
Open pipeline
$693,000
6 active deals
Closed won
$245,000
This quarter
Weighted forecast
$429,660
62% win rate applied
Total value
$938,000
8 in view
Discovery2
$103k
PA
PacerInes Duarte
$42,000Apr 05
SDAK
D-4103
CO
CobaltNina Sorensen
$61,000Apr 11
MR
D-4107
Proposal2
$230k
LU
LumenRavi Shah
$96,000Mar 28
AK
D-4102
ME
MeridianAli Rahman
$134,000Apr 02
AKSD
D-4106
Negotiation2
$360k
NO
NorthwindAmara Kade
$148,000Mar 22
JTMR
D-4101
OR
OrbitalTom Beckett
$212,000Mar 19
MR
D-4104
Closed won2
$245k
HA
HalcyonGrace Lin
$88,000Mar 06
JT
D-4105
VA
VantageDiego Ruiz
$157,000Feb 28
SD
D-4108
Weighted forecast uses a 62% historical win rate.
$429,660 weighted
PipelineTable
Open block
Team Directory
Team and HR
Profile cards and a compact list, with search, department filtering, and availability states.
Team directory
8 of 8 people
Showing
8
of 8 people
Departments
5
Across the org
Available now
4
Online status
AK
Amara KadeStaff Engineer
Lisbon · Engineeringamara@coloxo.dev
Available
JT
Jonas TerrellDesign Lead
Berlin · Designjonas@coloxo.dev
In a meeting
MR
Mei RutherfordProduct Manager
Singapore · Productmei@coloxo.dev
Available
SO
Sam OkaforPlatform Engineer
Lagos · Engineeringsam@coloxo.dev
Away
LP
Lena PetrovData Scientist
Warsaw · Datalena@coloxo.dev
Offline
RS
Ravi ShahFrontend Engineer
Bengaluru · Engineeringravi@coloxo.dev
Available
ID
Ines DuarteBrand Designer
Porto · Designines@coloxo.dev
In a meeting
TB
Tom BeckettAccount Executive
Austin · Salestom@coloxo.dev
Available
GridList
Open block

Transaction History

Finance

Reconciling balance summary beside a sortable ledger with date and payment-method filters.

Transactions

Operating account · USD

Balance

$113,360

Opening $128,400

Income

$40,200

12%

settled this period

Expenses

$55,240

settled this period

Pending

$9,600

awaiting settlement

Ledger

8 entries

Recent transactions
Reference	Counterparty		Status
TXN-9021	Northwind LtdBank transfer	+$14,800	Settled	2024-10-28
TXN-9020	AWSCard	−$6,240	Settled	2024-10-27
TXN-9019	Lumen AnalyticsBank transfer	+$9,600	Pending	2024-10-27
TXN-9018	Payroll — OctDirect debit	−$41,200	Settled	2024-10-25
TXN-9017	Orbital LabsBank transfer	+$21,200	Settled	2024-10-24
TXN-9016	FigmaCard	−$468	Failed	2024-10-23

Sample data. Balance counts settled movements only, so pending and failed entries never change it.

Compact rowsComfortable rows

Open block

Activity Timeline
Activity and Notifications
Date-grouped audit events with event-type icons, kind filters, and pagination.
Activity log
9 events · retained 90 days
All events
9
90-day retention
Security
2
Automated & manual
Changes
2
Config & content
Access
2
Sign-ins & invites
Today
AKAmara Kadeupdated the billing webhook secretUpdated
webhooks / prodToday at 14:32· id e1
JTJonas Terrellpublished a new blockCreated
design-system / blocksToday at 13:08· id e2
SYSystemblocked 18 requests after repeated 401sSecurity
api / edgeToday at 11:47· id e3
MRMei Rutherfordinvited a teammate as editorAccess
org / membersToday at 09:15· id e4
Page 1 of 3
1–4 of 9
TimelineCompact
Open block
File Management
Data and Tables
Upload queue with working retry and delete, a per-status breakdown, and a filterable file list.
Files
Upload queue and library in one view
Storage used
26.2 MB
5 files in queue
Completed
2
1 still uploading
In library
5
1 need retry
Upload files
or drag and drop
.pdf,.csv,.json,.xlsx,.mp4 (max. 50 MB)
brand-tokens.json
180 KB
Complete
100%
checkout-flow.mp4
23 MB
Uploading...
64%
q3-forecast.xlsx
2 MB
Uploading...
0%
handover-notes.pdf
792 KB
Failed
component-audit.csv
94 KB
Complete
100%
Drag files here or browse. Max 50 MB per file.
Queue health
Completed2
40%
Uploading1
20%
Queued1
20%
Failed1
20%
brand-tokens.json
180 KB
Completed
100%
checkout-flow.mp4
23 MB
Uploading
64%
q3-forecast.xlsx
2 MB
Queued
0%
handover-notes.pdf
792 KB
Failed
component-audit.csv
94 KB
Completed
100%
Bar progressFill progress
Open block
Notification Center
Activity and Notifications
Category tabs, unread counts, mark-all-as-read, per-row dismissal, and a real empty state.
Notifications
3 unread
Unread
3
Needs your attention
Mentions
2
1 new mention
Security
1
1 alert open
Jonas mentioned youNew4m
Can you review the pricing block before standup?
Invoice paidNew1h
Northwind settled invoice #4821 for $14,800.
New sign-in locationNew3h
A session started from Frankfurt using SSO.
New teammate joined6h
Ravi Shah accepted your invite as an editor.
Card expiring soon1d
The card ending 4421 expires at the end of the month.
Mei replied to your thread1d
Agreed — let's split the data table block.
InboxPanel
Open block
Onboarding Wizard
Forms and Onboarding
Four validated steps with inline errors, keyboard support, and a completion summary.
Create your workspace
Step 1 of 4
Name it and pick a region.
Setup progress0%
0%
Workspace name
Shown in the sidebar and on invitations.
Data region
StepsChecklist
Open block

Interactive Data Explorer

Data and Tables

Row selection with contextual bulk actions, column visibility, and team filtering on one table.

Members

10 people · 7 active

Members

8 seats assigned

Active

Signed in recently

Invited

Awaiting acceptance

Suspended

Access revoked

Workspace members
			Status		Last active
AK Amara Kadeamara@coloxo.dev	Engineering	Owner	Active	1	2m ago
JT Jonas Terrelljonas@coloxo.dev	Design	Admin	Active	1	1h ago
MR Mei Rutherfordmei@coloxo.dev	Product	Editor	Active	1	3h ago
SO Sam Okaforsam@coloxo.dev	Engineering	Editor	Active	1	Yesterday
LP Lena Petrovlena@coloxo.dev	Data	Viewer	Invited	1	—
RS Ravi Shahravi@coloxo.dev	Engineering	Editor	Active	1	4d ago

Full controlsMinimal

Open block

Interactive Visual Experience

Visual Experiences

Six live effects with quality, speed, and preset controls; the code sample regenerates as you change them.

Visual effects

Rendered live at low quality — nothing here is a screenshot.

WebGL & canvas

Aurora mesh gradient

Soft drifting colour fields with a fine grain pass.

Controls

Effect

Quality

Speed0.60

Generated code

AuroraMeshGradient.tsx

import { AuroraMeshGradient } from "@coloxo/ui/visuals";

export function AuroraMeshGradientDemo() {
  return (
    <div className="relative h-[22rem] w-full overflow-hidden rounded-xl">
      <AuroraMeshGradient
        className="absolute inset-0"
        speed={0.6}
        quality="low"
        paused={false}
        softness={0.65}
        grain={0.035}
        colorA="#2348ff"
        colorB="#7c3aed"
        colorC="#22d3ee"
      />
    </div>
  );
}

PlaygroundFull width

Open block

Category	p50	p95
Mon	38 ms	62 ms
Tue	34 ms	58 ms
Wed	41 ms	71 ms
Thu	30 ms	52 ms
Fri	28 ms	47 ms

Category	Revenue	Target
May	$148k	$150k
Jun	$162k	$158k
Jul	$155k	$165k
Aug	$181k	$172k
Sep	$194k	$180k
Oct	$212k	$190k

Category	Value	Share
Direct	$412,000	39.2%
Partner	$286,000	27.2%
Self-serve	$214,000	20.3%
Marketplace	$140,000	13.3%

Beautiful interfaces, built your way

One system for every surface you ship

Realtime telemetry

Budget guardrails

60 primitives, one import

Revenue vs. target

Revenue by channel

Recent activity

Simple pricing that scales with your team

Priority tasks

Upcoming milestones

Ledger

Create your workspace