How do I use Recent Transactions Table in my project?

Copy the RecentTransactionsTable source code from https://opensourceui.in/components/recent-transactions-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 Recent Transactions Table in a commercial project?

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

Back to Table Components / Table

Recent Transactions Table

Stripe-style transaction list with positive and negative amounts and simple pagination.

Preview

Transactions

This month

Description	Date	Amount
Payment from Northwind	Mar 8	+$420.00
AWS infrastructure	Mar 8	−$31.20
Stripe payout	Mar 7	+$890.00
Refund — Order #3207	Mar 6	−$64.00
Client retainer	Mar 5	+$250.00

Page 1 of 2

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/recent-transactions-table.tsx in your project.
4
Import and render:
Example
import { RecentTransactionsTable } from "@/components/table/recent-transactions-table";
<RecentTransactionsTable />

lib/cn.ts

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

components/table/recent-transactions-table.tsx

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

Back to Table Components / Table

Recent Transactions Table

Stripe-style transaction list with positive and negative amounts and simple pagination.

Preview

Transactions

This month

Description	Date	Amount
Payment from Northwind	Mar 8	+$420.00
AWS infrastructure	Mar 8	−$31.20
Stripe payout	Mar 7	+$890.00
Refund — Order #3207	Mar 6	−$64.00
Client retainer	Mar 5	+$250.00

Page 1 of 2

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/recent-transactions-table.tsx in your project.
4
Import and render:
Example
import { RecentTransactionsTable } from "@/components/table/recent-transactions-table";
<RecentTransactionsTable />

lib/cn.ts

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

components/table/recent-transactions-table.tsx

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