Components

Buttons

Variants
Different button styles
Sizes
Small, default, large, icon

Badges

Variants
Status indicators and labels
DefaultSecondaryOutlineDestructive Success Warning Info

Avatars

Sizes & Fallbacks
User profile images with initials fallback
CNJDABLGXL

Cards

Simple Card
A basic card component

Cards group related content and actions.

Highlighted
With accent border
Muted
Subtle background

Use for secondary info.

Pricing Cards

Stripe-Ready Pricing Component
Complete pricing cards with toggle, ready for Stripe Checkout integration

Free

For getting started

$0/mo
  • Basic features
  • Community support
  • 1 project
Most Popular

Pro

For growing businesses

$29/mo
  • All Free features
  • Priority support
  • Unlimited projects
  • Advanced analytics
  • Custom integrations

Enterprise

For large teams

$99/mo
  • All Pro features
  • Dedicated support
  • SLA guarantee
  • Custom contracts
  • On-premise option
Usage Example
How to use with your Stripe billing API
// Call your billing API
const handleSubscribe = async (interval) => {
  const res = await fetch('/api/billing/checkout', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ interval })
  });
  const { url } = await res.json();
  window.location.href = url; // Redirect to Stripe
};

Testimonials

Social Proof Components
Build trust with customer testimonials and reviews
This boilerplate saved us weeks of development time. The security features are top-notch.
SC
Sarah Chen
CTO at TechStartup
Finally, a Next.js starter that takes security seriously. Highly recommended!
MB
Michael Brown
Lead Developer at DevAgency
The Stripe integration worked out of the box. We launched in half the time.
ER
Emily Rodriguez
Founder at SaaSify
Single Testimonial
Use individual cards for featured reviews
This boilerplate saved us weeks of development time. The security features are top-notch.
SC
Sarah Chen
CTO at TechStartup

FAQ Accordion

Frequently Asked Questions
Answer common questions with expandable accordions

Simply clone the repository, run npm install, and follow our quick start guide. You'll be up and running in minutes.

We offer a 14-day money-back guarantee. If you're not satisfied, we'll refund your purchase - no questions asked.

Yes! The license allows unlimited commercial projects. Build as many SaaS products as you want.

You get access to our Discord community, documentation, and email support for any questions.

Allow Multiple Open
Set allowMultiple=true to let users expand multiple items

Simply clone the repository, run npm install, and follow our quick start guide. You'll be up and running in minutes.

We offer a 14-day money-back guarantee. If you're not satisfied, we'll refund your purchase - no questions asked.

Stat Cards

Users

12,847

+12%

Revenue

$48,250

+18%

Growth

+24%

Trending up

Orders

156

-3%

Charts

Bar Chart
Monthly revenue
32
35
38
42
45
48
Jan
Feb
Mar
Apr
May
Jun
Custom Colors
Blue gradient bars
12
18
15
20
17
Mon
Tue
Wed
Thu
Fri

Progress Bars

Colors & Sizes
Emerald (Default)65
Blue80
Purple45
Red25
Small
Medium
Large

Form Elements

Input Fields

Tabs

Dialog

Sheet

Side Panels
Slide-out panels from different sides of the screen

Table

NameEmailRoleStatus
Alice Johnsonalice@example.comAdminActive
Bob Smithbob@example.comEditorActive
Carol Whitecarol@example.comViewerInactive

Data Table

Advanced Table
Configurable data table with custom renderers
NameEmailRoleStatus
Alice Johnsonalice@example.comAdminActive
Bob Smithbob@example.comEditorActive
Carol Whitecarol@example.comViewerPending
David Leedavid@example.comEditorActive

Scroll Area

Vertical Scroll
Custom scrollbar for long content
1

Item 1

Description for item 1

2

Item 2

Description for item 2

3

Item 3

Description for item 3

4

Item 4

Description for item 4

5

Item 5

Description for item 5

6

Item 6

Description for item 6

7

Item 7

Description for item 7

8

Item 8

Description for item 8

9

Item 9

Description for item 9

10

Item 10

Description for item 10

11

Item 11

Description for item 11

12

Item 12

Description for item 12

13

Item 13

Description for item 13

14

Item 14

Description for item 14

15

Item 15

Description for item 15

Tags List
Scrollable list of tags
ReactNext.jsTypeScriptTailwind CSSPrismaPostgreSQLNode.jsExpressGraphQLREST APIAuth.jsStripeVercelDockerKubernetesAWSCI/CDTestingSecurityPerformance

Toast

Notifications
Click to trigger toast notifications

Skeleton

Loading States
Placeholder content while loading

Spinner

Loading States
Animated loading spinners in different sizes
Loading...
Small
Loading...
Medium
Loading...
Large
Loading...
Extra Large
Loading...
Blue
Loading...
Purple

Tooltip

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Large paragraph text for emphasis.

Default paragraph text for body content.

Small muted text for secondary info.

Extra small text for captions.

inline code⌘K