How do I use Customers Table in my project?

Copy the CustomersTable source code from https://opensourceui.in/components/customers-table, add lib/cn.ts if needed, install clsx tailwind-merge and lucide-react, then import and render the component in your React or Next.js app.

Can I use Customers Table in a commercial project?

Yes. Opensource UI is MIT licensed. You can use CustomersTable in personal and commercial projects without UI attribution.

Back to Table Components / Table

Customers Table

SaaS customer list with plan, last active, and MRR. Common billing dashboard table.

Preview

Customers

4 accounts

MRR$87/mo

Customer	Plan	Last active	MRR
Bidyut Kundu Studio Dev	Team	2h ago	$49
Rupam Sen OUI Design	Pro	1d ago	$19
Ava Chen Northwind	Pro	3d ago	$19
Sofia Ortiz Harbor Labs	Free	1w ago	—

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/table/customers-table.tsx in your project.
4
Import and render:
Example
import { CustomersTable } from "@/components/table/customers-table";
<CustomersTable />

lib/cn.ts

1
2
3
import { cn } from '@/lib/cn';
 
// Full source is available in the repository checkout.

components/table/customers-table.tsx

1
2
// Full source: components/components/table/customers-table.tsx
// The Cloudflare worker does not expose the source tree at request time.

Back to Table Components / Table

Customers Table

SaaS customer list with plan, last active, and MRR. Common billing dashboard table.

Preview

Customers

4 accounts

MRR$87/mo

Customer	Plan	Last active	MRR
Bidyut Kundu Studio Dev	Team	2h ago	$49
Rupam Sen OUI Design	Pro	1d ago	$19
Ava Chen Northwind	Pro	3d ago	$19
Sofia Ortiz Harbor Labs	Free	1w ago	—

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/table/customers-table.tsx in your project.
4
Import and render:
Example
import { CustomersTable } from "@/components/table/customers-table";
<CustomersTable />

lib/cn.ts

1
2
3
import { cn } from '@/lib/cn';
 
// Full source is available in the repository checkout.

components/table/customers-table.tsx

1
2
// Full source: components/components/table/customers-table.tsx
// The Cloudflare worker does not expose the source tree at request time.