Enterprise Examples
Playground-only HR compositions built from @coloxo/ui primitives — demo data, not production logic.
Templates mirror Figma enterprise layouts: metrics, directory tables, and filter affordances.
Usage
Enterprise composition
import { Badge, Card, Statistic, Table,} from "@coloxo/ui";export function HrDashboard() { return ( <> <div className="grid gap-4 md:grid-cols-3"> <Card variant="elevated"> <Statistic label="Employees" value="1,248" trend="+12.4%" /> </Card> </div> <Card title="Employee directory"> <Table data={rows} columns={[ { id: "name", header: "Name", accessor: "name", sortable: true }, { id: "status", header: "Status", accessor: "status", cell: ({ value }) => ( <Badge type="pill-color" color="success"> {String(value)} </Badge> ), }, ]} /> </Card> </> );}Employees
1,248
+12.4%
Headcount this quarter
Payroll
On track
Ready
Cut-off Friday 18:00
Leave
23
4 urgent
Pending approvals
Employee directory
Demo data only
| Role | Location | Timezone | Status | |
|---|---|---|---|---|
| Ada Lovelace | Principal Engineer | London, UK | GMT | Active |
| Grace Hopper | Research Fellow | Arlington, VA | EST | On leave |
| Alan Turing | Security Architect | Manchester, UK | GMT | Active |
| Katherine Johnson | Data Scientist | Hampton, VA | EST | Active |
| Tim Berners-Lee | Platform Advisor | Boston, MA | EST | Contractor |