design system

Token-powered components

Every component adapts to all 19 themes automatically. Built with CSS custom properties, zero JavaScript animation dependencies.

gradient cards

Feature cards with gradient borders

Cards with token-based gradient borders that glow on hover. Every gradient pair uses accent colors from the active theme.

Island Architecture

Ship zero JavaScript by default. Interactive Vue components hydrate only when needed, keeping your pages fast.

19 Built-in Themes

Dracula, Nord, Gruvbox, Catppuccin, Tokyo Night, Kanagawa, Rose Pine, and more. Switch themes with a single attribute change.

Type-Safe Tokens

Style Dictionary generates CSS variables, Tailwind config, and TypeScript constants from a single token source.

Auth Built In

Better Auth handles email/password and OAuth. JWT tokens are shared with the .NET backend for seamless cross-stack auth.

Full-Stack Ready

Optional .NET 10 backend with clean architecture, EF Core, and Aspire orchestration. Strip it if you don't need it.

CI/CD Pipeline

GitHub Actions with semantic-release, commitlint, path filtering, and automated deploys to Cloudflare and Docker.

Numbers that speak

19

Built-in themes

8+

Scaffolding commands

0

JS animation deps

100%

Token coverage

testimonials

What developers are saying

ShockStack saved me weeks of setup. The design token system alone is worth it — switch themes and everything just works.
AC

Alex Chen

Senior Frontend Engineer

Finally a monorepo template that actually has opinions. No more bikeshedding about project structure or tooling choices.
SK

Sarah Kim

Full-Stack Developer

The Aspire integration is chef's kiss. One command to spin up Postgres, the API, and the frontend. Onboarding new devs is trivial now.
MJ

Marcus Johnson

Engineering Lead

pricing

Simple, transparent pricing

ShockStack is open source. These cards showcase the pricing component.

Starter

For personal projects and learning

Free
  • Full monorepo template
  • All 19 themes
  • Community support
  • MIT license
Get Started
Popular

Pro

For teams shipping production apps

$29 /mo
  • Everything in Starter
  • Priority support
  • Private Discord access
  • Early access to updates
  • Custom theme builder
Start Free Trial

Enterprise

For organizations at scale

Custom
  • Everything in Pro
  • Dedicated support
  • Custom integrations
  • SLA guarantee
  • Team onboarding
Contact Sales

badges

Labels & status chips

Three variants across every accent color. Great for tags, statuses, and inline metadata.

.badge-subtle
Purple Pink Green Cyan Orange Red Yellow Neutral
.badge-solid
Purple Pink Green Cyan Orange Red Yellow Neutral
.badge-outline
Purple Pink Green Cyan Orange Red Yellow Neutral

alerts

Inline callouts

Four semantic variants with accent-matched borders and icons.

keyboard

Keyboard shortcuts

Platform-aware key chips. The Mod key renders as ⌘ on macOS and Ctrl elsewhere.

Open command palette ⌘ + K
Search /
Toggle theme ⌘ + Shift + L
Close dialog Esc
Submit form ⌘ + Enter

avatars

User avatars

Initial-based fallbacks with gradient backgrounds across five sizes. Use the src prop when an image is available.

sizes
gradients
stacked group
+4

accordion

Collapsible panels

Built on reka-ui primitives — accessible, keyboard-navigable, respects prefers-reduced-motion.

tooltips

Hover tooltips

Positioned on all four sides, portaled to body, respects motion preferences.

progress

Progress indicators

Determinate bars with gradient fills, plus an indeterminate slider for background work.

Uploading assets 72%
Running tests 45%
Building bundle 90%
Syncing with server

skeleton

Loading placeholders

Shimmer animation for content that hasn't loaded yet. Pulses instead when prefers-reduced-motion is set.

profile card
media card

demo banner

Flag pages as demos

Full-bleed banner that marks a page as placeholder content. Drop it at the top of any showcase page so the content isn't mistaken for real.

typography

Gradient text utilities

Five gradient text presets that adapt to every theme. Use them on headings, stats, or any text that needs emphasis.

.gradient-text-purple-pink

The quick brown fox

.gradient-text-cyan-green

The quick brown fox

.gradient-text-orange-yellow

The quick brown fox

.gradient-text-pink-orange

The quick brown fox

.gradient-text-green-cyan

The quick brown fox

backgrounds

Gradient backgrounds

Subtle gradient backgrounds that add depth without overwhelming content.

.gradient-bg-subtle

Vertical fade through accent

.gradient-bg-mesh

Multi-point mesh gradient

.gradient-bg-radial

Top-down radial spotlight