MRR
$48,201
+4.2%rated this close
Built for Next.js + Tailwind CSS
StarYour next app.
A head start.
Thoughtfully designed blocks for the parts every SaaS needs. Find your starting point, choose a style, and copy the code into your project.
No account needed. Preview, copy, and make it yours.
INSIDE THE KITstats-01.tsx
Workspace overviewLive preview
Close / 2026-08-27
Floor metrics
Events
2,441,019
+12.8%posted today
Open invoices
12
−2awaiting wire
Failed meters
3
+3collector retry
100
Ready-to-copy blocks
9
Categories
11
Design directions
TSX
Source you can edit
A FEW PLACES TO START
Skip the blank canvas.
Login
auth · login-01
as the sign-in screen for email + password operators.
Available states
- Default
- Error
Preview & copy
Pricing
marketing · pricing-01
on the marketing pricing section for three-tier SaaS plans.
Available states
- Default
Preview & copy
Data table
data · data-table-01
for dense operational tables: events, invoices, members.
Available states
- Default
- Loading
- Empty
- Error
Preview & copy
Billing
billing · billing-01
on the billing screen for current plan and invoice history.
Available states
- Default
- Loading
- Empty
- Error
Preview & copy
Onboarding
onboarding · onboard-01
after first login to walk an operator through meter setup.
Available states
- Default
Preview & copy
Hero
marketing · hero-01
at the top of the marketing home page, directly under the navbar.
Available states
- Default
Preview & copy
Fits your stack
React, TypeScript, Next.js, and Tailwind CSS v4. See each block’s dependencies before you copy.
Set up your projectMake it feel like you
Start with LEDGER’s paper-and-ink aesthetic or choose from ten alternative design presets.
Explore the presetsSee the whole picture
Check desktop and mobile layouts, light and dark themes, and available loading and error states.
Try the block viewerUseful to you? Help it grow.
Star the repository to bookmark the kit, report a rough edge, or contribute a block you wish existed.