S
ShipKit UI
Component Catalog · v1.0
30 components · Modern Dark

Component Catalog

30 production-ready components for SaaS landing pages. Each is isolated below for easy preview and screenshot.

01 · Hero — Centered with Glow
HeroCentered.tsx
NEWv2.0 with 30+ components

Ship landing pages
in minutes, not weeks.

30 production-ready React + Tailwind components. Copy, paste, customize, ship.

02 · Hero — Split with Mockup
HeroSplit.tsx
— A new way to build

The fastest way to launch your SaaS.

Stop reinventing landing pages. Start shipping products. 30 components, zero setup.

03 · Hero — Minimal Editorial
HeroMinimal.tsx

A component library

Designed for the discerning developer.

Explore the collection →
04 · Logo Cloud
LogoCloud.tsx

Trusted by 4,000+ indie hackers and teams

Acme
VECTOR
/orbit
Lumen.
NOVA
◆ Prism
05 · Features — Bento Grid
FeaturesBento.tsx

Everything you need.
Nothing you don't.

Performance

Zero dependencies, zero bloat

Pure Tailwind CSS. No external libraries to install. Drop a component in and it just works.

TypeScript ready

Full type definitions. IntelliSense everywhere.

Lifetime updates

Buy once, get every future component.

Fully responsive, mobile-first

Tested on every device size. Looks pixel-perfect from 320px to 4K.

06 · Features — 3-Column Grid
FeaturesGrid.tsx
Built for builders

Three reasons to ship today

Lightning fast

Pure Tailwind. No JS dependencies. Pages load in milliseconds.

Production-ready

Battle-tested in real SaaS apps. Accessibility built-in.

Crafted with love

Every detail polished. Every pixel intentional.

07 · Stats Row
StatsRow.tsx
30+
Components
4K+
Customers
99%
5-star reviews
2 min
Avg setup
08 · Pricing — 3-Tier Cards
PricingThreeTier.tsx

Pay once. Use forever.

No subscriptions. No vendor lock-in. Lifetime updates included.

Personal

$19one-time

For solo builders shipping side projects.

Get Personal
  • 30 components
  • 1 personal project
  • Lifetime updates
Most popular

Pro

$29one-time

For freelancers building client work.

Get Pro
  • Everything in Personal
  • Unlimited projects
  • Figma source files
  • Priority support

Team

$79one-time

For agencies shipping at scale.

Get Team
  • Everything in Pro
  • Commercial use
  • 10 team seats
09 · Testimonials — Marquee
TestimonialsMarquee.tsx

What people are saying

"Saved me 20 hours on my last launch. The bento grid alone is worth the price."

Sarah Chen
Indie hacker

"Finally a component pack that doesn't look generic."

Marcus Webb
Founder, Orbit

"Shipped my MVP landing page in one evening."

Priya Sharma
Solo dev

"The dark mode design is gorgeous. Clients keep asking who designed it."

David Kim
Freelance designer

"Saved me 20 hours on my last launch. The bento grid alone is worth the price."

Sarah Chen
Indie hacker

"Finally a component pack that doesn't look generic."

Marcus Webb
Founder, Orbit

"Shipped my MVP landing page in one evening."

Priya Sharma
Solo dev

"The dark mode design is gorgeous. Clients keep asking who designed it."

David Kim
Freelance designer

"Best $29 I've spent this year."

Alex Rivera
CTO, Lumen

"Code quality is excellent. Reads like Vercel-internal code."

Lena Park
Senior engineer

"Bought Friday, shipped Sunday. Instant ROI."

Tom Anderson
Maker

"The marquee section. I've copied this 4 times already."

Yuki Tanaka
Indie founder

"Best $29 I've spent this year."

Alex Rivera
CTO, Lumen

"Code quality is excellent. Reads like Vercel-internal code."

Lena Park
Senior engineer

"Bought Friday, shipped Sunday. Instant ROI."

Tom Anderson
Maker

"The marquee section. I've copied this 4 times already."

Yuki Tanaka
Indie founder
10 · Testimonials — Hero Quote
TestimonialHero.tsx
"ShipKit completely changed how I build landing pages. What used to take a week now takes an afternoon. It's the best $29 I've spent on tools this year."
Maya Patel
Founder, Drift Studios
11 · FAQ — Accordion
FAQAccordion.tsx

Questions, answered

30 production-ready React + Tailwind components: heroes, features, pricing tables, testimonials, CTAs, navbars, footers, and more. Plus a working Next.js demo site, full TypeScript types, and Figma source files (Pro tier).

Pro and Team tiers allow unlimited use in client projects and SaaS products.

Basic React knowledge helps. The HTML version requires zero React knowledge.

Yes. Every tier includes lifetime updates.

12 · CTA — Centered Banner
CTABanner.tsx

Ready to ship
faster?

Join 4,000+ builders who stopped reinventing landing pages.

13 · Navbar — Sticky with Blur
Navbar.tsx
14 · Footer — Multi-Column
Footer.tsx
15 · Newsletter CTA
NewsletterCTA.tsx
Newsletter

Stay in the loop

Get notified when new components ship. No spam, just updates.

Joined by 1,200+ builders

16 · Hero — Email Form
HeroEmailForm.tsx
NEWNow in early access

Ship landing pages in minutes, not weeks.

Production-ready React components for SaaS founders who'd rather build their product than rebuild their hero section.

joined by 1,200+ developers this month
17 · Hero — Video Background
HeroVideoBackground.tsx
Live preview

Built for the next generation.

A complete component system, designed dark-first, engineered for performance, ready to ship in production today.

18 · Features — Alternating Image+Text
FeaturesAlternating.tsx
Features

Everything you need. Nothing you don't.

Built for speed

Drop-in components, zero configuration

Every component ships as a single file with no external dependencies. Copy, paste, ship. No build steps, no runtime weight, no surprise install errors.

  • Pure Tailwind — no styling libraries
  • TypeScript types included
  • Tree-shakeable by default
Designed in dark

Mode-aware out of the box

Components are built dark-first, with light variants tested in every state. Switch modes without touching a line of component code.

  • Dark + light themes
  • Tested across browsers
  • Reduced-motion respected
Type-safe by default

Props that actually help you

Every component is fully typed with sensible defaults. Your editor will catch mistakes before they become bugs in production.

  • Full TypeScript coverage
  • Discriminated union props
  • JSDoc on public APIs
19 · Features — Tabbed Interactive
FeaturesTabbed.tsx
How it works

Four steps from idea to live.

Compose your interface from primitives

Every component is a single file. No registry, no build step, no install dance. Drop it in your project, customize the props, ship.

  • Single-file components
  • No external dependencies
  • Tree-shakeable by default
20 · Features — Stats + Features Combo
FeaturesStatsCombo.tsx
Why ShipKit

Numbers that matter. Outcomes that ship.

Every component is benchmarked, audited, and battle-tested in real production apps before it ships.

10x
Faster shipping
<1kb
Per component
0
External deps
30+
Components

Built for performance

Components compile to vanilla CSS. No JavaScript runtime, no hydration cost, no client bundle bloat. Static-site friendly out of the box.

Accessible by default

ARIA roles, keyboard navigation, focus rings, and reduced-motion support are built into every component. WCAG AA compliant from day one.

Updated weekly

New components, patterns, and refinements ship every Monday. Lifetime access means every future addition is yours, free of charge.

21 · Pricing — Monthly/Yearly Toggle
PricingToggle.tsx

Simple pricing. No surprises.

Start free, upgrade when you're ready. Cancel anytime.

Hobby

$0forever

For solo devs and side projects

Start free
  • Up to 3 projects
  • 1 GB storage
  • Community support
  • Basic analytics
Most popular

Pro

$24/mo

For growing teams and serious builders

Start 14-day trial
  • Unlimited projects
  • 100 GB storage
  • Priority email support
  • Advanced analytics
  • Custom domains

Team

$79/mo

For agencies and product teams

Contact sales
  • Everything in Pro
  • Unlimited storage
  • SSO + SAML
  • Audit logs
  • Dedicated support
22 · Pricing — Comparison Table
PricingComparisonTable.tsx
Compare plans

Every detail, side by side.

Features
Hobby$0Get Hobby
Pro$24/moGet Pro
Team$79/moGet Team
Core
Projects3UnlimitedUnlimited
Storage1 GB100 GBUnlimited
Custom domains
API access
Collaboration
Team seats15Unlimited
Roles & permissions
Audit logs
SSO + SAML
Support
Community
Email support
Priority response
Dedicated CSM
23 · Testimonials — Card Grid
TestimonialsCardGrid.tsx
Testimonials

Loved by 4,000+ builders.

"ShipKit cut my landing page time from a full week down to an afternoon. The bento grid alone is worth every penny."
Sarah Chen
Indie hacker · @sarahbuilds
"Finally a component pack that doesn't look like every other AI-generated SaaS. Real design, real polish, real shipping."
Marcus Webb
Founder, Orbit · orbit.dev
"Bought it Friday, shipped my MVP Sunday. The pricing toggle and FAQ accordion saved me half a day each."
Priya Sharma
Solo developer · @priyaships
"Code quality reads like Vercel-internal stuff. Clean Tailwind, no nested hell, no surprise dependencies."
Lena Park
Senior engineer · Stripe
"Dark mode design is gorgeous. Three clients have asked who designed our landing page since we shipped it."
David Kim
Freelance designer · @davidkim
"Best $29 I've spent on tools this year. The mega menu is so good I rebuilt my whole nav around it."
Alex Rivera
CTO · Lumen Labs
24 · Navbar — Centered Minimal
NavbarCenteredMinimal.tsx
25 · Navbar — Mega Menu Dropdown
NavbarMegaMenu.tsx
26 · CTA — Split with Mockup
CTASplitMockup.tsx
Ready when you are

Stop rebuilding. Start shipping.

Drop ShipKit into your project today and have a polished landing page live before dinner. No subscriptions, no setup, no excuses.

Lifetime updates
30-day refund
HeroEmailForm.tsx
import { HeroEmailForm } from "./shipkit";

export default function Page() {
  return <HeroEmailForm
    title="Ship faster"
    cta="Get started"
  />;
}
✓ Built in 12ms · 0 dependencies
27 · Footer — Minimal Centered
FooterMinimalCentered.tsx
28 · Footer — with Newsletter
FooterWithNewsletter.tsx
29 · Team / About Section
TeamSection.tsx
The team

Small team. Big shipping energy.

Four people, one mission: help you ship faster without sacrificing craft.

Hussnain Iqbal

Founder & Engineering

Full-stack developer building tools for indie hackers. Previously freelance.

Maya Patel

Design Lead

Former Stripe designer. Obsessed with type, color, and the empty space between.

Alex Rivera

Engineering

React internals, build tools, and the dark arts of CSS. Lives in the terminal.

Yuki Tanaka

Community

Talks to every customer. Writes the changelog. Keeps the Discord lively.