Component Library

A comprehensive showcase of all boilerplate components. Toggle the theme to verify dark mode support.

UI Primitives

Base shadcn-ui components used throughout the boilerplate.

Button

CVA-based button with 6 variants and 3 sizes.

Badge

Inline label badges with 4 variants.

Default
Secondary
Destructive
Outline

Card

Container with header, content, and footer sections.

Card Title

A brief description of this card content.

Card body content goes here. This is a flexible container component.

Input

Text input field with variants.

Tabs

Tabbed content navigation.

Overview content with key metrics and summary data.

Accordion

Expandable content sections.

Avatar

User avatars with fallback initials.

SCMJER

Separator

Visual divider between content sections.

Content above

Content below

Left
Right

Tooltip

Hover-triggered tooltip for additional context.

Navbar (Default)

Standard left-aligned logo with icon, right-aligned nav. Used by the boilerplate layout.

S
SaaS App
Page content

NavbarCentered

Logo with icon centered, nav links on left, actions on right. Spacious, editorial feel.

S
SaaS App
Page content

NavbarTransparent

Transparent initially, becomes solid with border on scroll. Best paired with hero-heavy pages.

S
SaaS App

No border until user scrolls

NavbarFloating

Pill-shaped floating navbar centered in the viewport. Compact, modern, gains shadow on scroll.

S
SaaS App

Floating pill navbar with shadow

Heroes

7 hero section variants for landing pages.

HeroCentered

Centered text with badge and dual CTAs. Classic, versatile.

Now in Beta

Ship products faster with less effort

The modern platform that automates your busywork so your team can focus on building what matters.

HeroSplit

Left text, right image/screenshot. Great for visual products.

New Release

See your data come to life

Beautiful dashboards, powerful queries, zero config. Connect your database and start exploring in seconds.

Product Screenshot

HeroGradient

Full-width gradient background with decorative blobs. Bold, modern.

The future of team collaboration

Bring your entire team together with real-time editing, smart notifications, and integrations with every tool you use.

HeroAurora

Animated aurora/conic gradient background. Atmospheric, premium.

Just Launched

Infrastructure for the next generation

Deploy globally in seconds. Scale to millions without thinking about servers, queues, or databases.

HeroGlow

Cursor-following spotlight glow with gradient highlighted word. Techy, modern.

Build something extraordinary

The all-in-one platform for teams who refuse to settle. Ship faster, iterate smarter, grow bigger.

HeroBadge

Animated pill badge, shimmer gradient text, optional stats row. Modern SaaS launch.

Now in Public Beta

The future of workflow automation

Connect every tool your team uses. Automate the busywork. Focus on what actually moves the needle.

10,000+

Active users

99.9%

Uptime SLA

150+

Integrations

HeroMinimal

Single headline, single CTA, maximum whitespace. For dev tools.

Build. Ship. Iterate.

The developer platform that gets out of your way.

Get Started

Features

5 feature section variants showcasing product capabilities.

FeaturesGrid

3-column icon + card grid. The standard feature showcase.

Everything you need

Powerful features designed to help your team ship faster.

Lightning Fast

Built for speed from the ground up with edge computing and optimized data pipelines.

Enterprise Security

SOC 2 compliant with end-to-end encryption, SSO, and role-based access control.

Real-time Analytics

Monitor performance metrics, user behavior, and business KPIs in real time.

Seamless Integrations

Connect with 200+ tools including Slack, Jira, Salesforce, and HubSpot.

Developer First

Full REST API, webhooks, SDKs in 8 languages, and comprehensive documentation.

Fully Customizable

White-label ready with custom themes, branding, and configurable workflows.

FeaturesAlternating

Zig-zag rows with text and image alternating. Good for storytelling.

Built for modern teams

Every feature designed with your workflow in mind.

Lightning Fast

Built for speed from the ground up with edge computing and optimized data pipelines.

Feature Illustration

Enterprise Security

SOC 2 compliant with end-to-end encryption, SSO, and role-based access control.

Feature Illustration

Real-time Analytics

Monitor performance metrics, user behavior, and business KPIs in real time.

Feature Illustration

FeaturesBento

Asymmetric bento grid with mixed card sizes. Modern, visual hierarchy.

Powerful by design

A thoughtfully crafted feature set.

Lightning Fast

Built for speed from the ground up with edge computing.

Enterprise Security

SOC 2 compliant with end-to-end encryption.

Real-time Analytics

Monitor performance metrics in real time.

Seamless Integrations

Connect with 200+ tools you already use.

Developer First

Full REST API, webhooks, and SDKs.

FeaturesTabs

Tabbed feature showcase with preview area. Interactive, compact.

Explore our features

Click any tab to see details.

Lightning Fast

Built for speed from the ground up with edge computing and optimized data pipelines.

Lightning Fast Preview

FeaturesIcons

Compact icon list without cards. Minimal, scannable.

Simple, yet powerful

Everything you need, nothing you don't.

Lightning Fast

Built for speed from the ground up with edge computing and optimized data pipelines.

Enterprise Security

SOC 2 compliant with end-to-end encryption, SSO, and role-based access control.

Real-time Analytics

Monitor performance metrics, user behavior, and business KPIs in real time.

Seamless Integrations

Connect with 200+ tools including Slack, Jira, Salesforce, and HubSpot.

Developer First

Full REST API, webhooks, SDKs in 8 languages, and comprehensive documentation.

Fully Customizable

White-label ready with custom themes, branding, and configurable workflows.

Pricing

3 pricing section variants. Checkout buttons redirect to /auth/sign-up in demo mode.

PricingToggle

Monthly/annual toggle with discount badge. Standard 3-tier pricing.

Simple, transparent pricing

Start free, upgrade when you're ready.

Save 20%

Free

For individuals getting started

$0/month
  • Up to 3 projects
  • Basic analytics
  • Community support
  • 1 GB storage

Pro

Popular

For growing teams

$29/month
  • Unlimited projects
  • Advanced analytics
  • Priority support
  • 50 GB storage
  • Custom domains
  • API access

Enterprise

For large organizations

$99/month
  • Everything in Pro
  • SSO & SAML
  • Dedicated support
  • Unlimited storage
  • SLA guarantee
  • Custom integrations

PricingComparison

Full feature comparison table. Best for feature-rich products.

Compare plans

Find the right plan for your team.

Features
Free
$0
Pro
Popular
$29/mo
Enterprise
$99/mo
Projects3UnlimitedUnlimited
Team members110Unlimited
Storage1 GB50 GBUnlimited
Analytics
Custom domains
SSO / SAML
Priority support
SLA guarantee

PricingSimple

Two-column free vs paid. Clean, minimal.

Pricing

No hidden fees. No surprises.

Free

Everything you need to get started

$0
  • Up to 3 projects
  • Basic analytics
  • Community support

Pro

For teams that need more power

$29/mo
  • Unlimited projects
  • Advanced analytics
  • Priority support
  • API access
  • Custom domains

Problem

3 problem section variants that frame the pain point.

ProblemPain

Pain point cards with warning/destructive styling.

Sound familiar?

These problems cost teams thousands of hours every year.

Hours of Manual Work

Teams spend 15+ hours per week on repetitive tasks that should be automated.

Error-Prone Processes

Manual data entry leads to costly mistakes and inconsistent outputs.

Wasted Budget

Companies lose $50K+ annually on inefficient tooling and duplicated effort.

ProblemBeforeAfter

Side-by-side before/after comparison.

The transformation

Before

  • Manual data entry across 5 spreadsheets
  • 3-day turnaround for client reports
  • Errors discovered weeks after the fact
  • No visibility into team workload

After

  • Automated ingestion from all data sources
  • Reports generated in under 60 seconds
  • Real-time validation catches errors instantly
  • Live dashboards for resource planning

ProblemStats

Statistics highlighting the pain. Data-driven.

The numbers don't lie

The cost of inefficiency is staggering.

68%

of teams report manual processes as their biggest bottleneck

$127B

lost annually across industries due to inefficient workflows

23 hrs

per week the average employee spends on repetitive tasks

How It Works

2 step-by-step variants explaining the product flow.

HowItWorksSteps

Horizontal 3-step flow with numbered badges and connectors.

How it works

Get started in three simple steps.

1

Connect Your Data

Link your existing tools and data sources with one-click integrations.

2

Configure Workflows

Set up automated workflows using our visual builder. No code required.

3

See Results

Watch as your team productivity increases and errors drop to near zero.

HowItWorksTimeline

Vertical timeline with icons. Good for multi-step processes.

Your journey

From setup to results in no time.

Step 1

Connect Your Data

Link your existing tools and data sources with one-click integrations.

Step 2

Configure Workflows

Set up automated workflows using our visual builder. No code required.

Step 3

See Results

Watch as your team productivity increases and errors drop to near zero.

FAQ

2 frequently asked questions section variants.

FaqAccordion

Expandable accordion. Interactive, saves vertical space.

Frequently asked questions

Everything you need to know.

FaqTwoColumn

Two-column static layout. All answers visible at once.

Common questions

Quick answers to the things people ask most.

How long does setup take?

Most teams are up and running within 30 minutes. Our guided onboarding walks you through connecting your data sources, configuring your first workflow, and inviting your team.

Can I import data from my existing tools?

Yes. We support one-click imports from 200+ tools including Salesforce, HubSpot, Jira, Notion, Google Sheets, and more. Custom CSV and API imports are also available.

Is there a free trial?

All paid plans include a 14-day free trial with full access to every feature. No credit card required to start.

What kind of support do you offer?

Free plans get community support. Pro plans include priority email support with 4-hour response times. Enterprise plans get a dedicated success manager and phone support.

Can I cancel anytime?

Absolutely. There are no long-term contracts. You can cancel your subscription at any time from the billing page, and you'll retain access until the end of your billing period.

Is my data secure?

We are SOC 2 Type II certified, use AES-256 encryption at rest and TLS 1.3 in transit, and offer SSO with SAML on Enterprise plans. Data is stored in isolated, region-specific environments.

Logos

2 logo bar variants for partner/customer logos.

LogoBarScroll

Infinite horizontal marquee of logos.

Trusted by leading companies

Acme Corp
Globex
Initech
Hooli
Pied Piper
Umbrella
Stark Ind.
Wayne Ent.
Acme Corp
Globex
Initech
Hooli
Pied Piper
Umbrella
Stark Ind.
Wayne Ent.

LogoBarStatic

Static row of grayscale logos.

Trusted by leading companies

Acme Corp
Globex
Initech
Hooli
Pied Piper
Umbrella
Stark Ind.
Wayne Ent.

Stats

2 stats section variants for key metrics.

StatsCounter

Animated counting numbers on scroll.

By the numbers

0+

Active Users

0%

Uptime SLA

0M+

API Calls / Day

0+

Integrations

StatsCards

Stat cards with icons in a 4-column grid.

Our impact

10,000+

Active Users

45+

Countries

99.9%

Uptime

4.9/5

Rating

CTA

2 call-to-action section variants.

CtaBanner

Full-width primary-colored banner with CTA.

Ready to get started?

Join thousands of teams already using our platform. Free to start, no credit card required.

CtaNewsletter

Email capture with input + button. Redirects to sign-up.

Stay in the loop

Get product updates, tips, and early access to new features.

Animations

6 reusable animation utilities for visual polish.

FadeInOnScroll

Fade in when scrolling into view. Supports up, down, left, right.

Fade up

Fade down

Fade left

Fade right

StaggeredEntrance

Children animate in one after another with configurable delay.

First item

Second item

Third item

CounterAnimation

Animated number counter triggered when scrolled into view.

0

Users

0%

Uptime

$0M

Processed

Marquee

Infinite horizontal scrolling container. Configurable speed and direction.

React
TypeScript
Tailwind
Next.js
Drizzle
Stripe
PostHog
Vercel
React
TypeScript
Tailwind
Next.js
Drizzle
Stripe
PostHog
Vercel

ParallaxSection

Content moves at a different speed during scroll for depth effect.

Parallax Content

This section moves slower than the page scroll, creating a depth effect.

TextGradientShimmer

Animated gradient shimmer effect on text.

This text has a gradient shimmer effect