Public primitives
Marquee, dock, and shimmer stay free. No license header.
Assembled blocks
Heroes, pricing, and chrome. One $49 unlock, no seat math.
Namespaced registry
@patina is public. @patina-pro reads X-License-Key.
Features
21 blocks
How the kit is meant to be used
Browse, preview, copy. Pay once if you need the assembled marketing sections.
Preview first
Every catalog item has a live stage. Light and dark. No screenshots.
Copy the file
The button copies the full component.tsx — not a teaser.
Install via CLI
npx shadcn add @patina/name. Pro adds the license header for you.
Marquee
Always free.
Dock
Always free.
Heroes
Pro assembled.
Pricing
Pro assembled.
shadcn/ui
New York tokens
Next.js
App Router
Better Auth
GitHub, Google, link
Stripe
One-time $49
Motion
motion.dev
SQLite
Local license store
| Capability | Free | Pro · $49 |
|---|---|---|
| Marquee, dock, shimmer | Yes | Yes |
| 20 motion primitives | Yes | Yes |
| 32 marketing blocks | Preview | Copy + CLI |
| Registry @patina | Public | Public |
| Registry @patina-pro | 401 | License key |
Built for modern teams
Everything you need to build production-ready interfaces
Developer experience
TypeScript, ESLint, and Prettier configured out of the box. Focus on building, not setup.
Design tokens
Consistent spacing, colors, and typography across all components. Easy to customize.
Component library
24 free primitives and 30+ Pro blocks. Everything from buttons to complete page sections.
Ship faster
Stop rebuilding the same patterns. Copy a component and ship your feature today.
Everything you need to ship
From low-level primitives to complete page templates
Production-ready primitives
Copy-paste components that work out of the box. Built with accessibility, responsive design, and smooth motion.
- 24 free components
- Motion primitives
- Dark mode support
- Full TypeScript
[Components preview]
Before and after
See how Patina transforms your development workflow
your-project/components
Inconsistent styling
Every component looks different
No dark mode support
Hard-coded colors everywhere
Accessibility issues
Missing ARIA labels and focus states
Rebuilding patterns
Same components in every project
Everything you need to ship
Built for developers who care about code quality and user experience
Copy-paste components
Full source code in every component. No NPM package, no build step, no hidden magic.
TypeScript first
Written in TypeScript with full type safety. Props autocomplete in your editor.
Theme tokens
Uses CSS variables for colors. Light and dark mode work automatically.
Motion design
Smooth animations built with Framer Motion. Respects prefers-reduced-motion.
Composable blocks
Mix and match components to build complex UIs. Everything works together.
Production ready
Accessible, responsive, and tested. Used in production by thousands of developers.
Why developers choose Patina
The component library that just works
TypeScript
Full type safety
Themeable
Light & dark mode
Fast
Zero runtime deps
Accessible
WCAG AA ready
Composable
Mix and match
Reliable
Battle tested
Components that feel native
Every component is designed to feel like it belongs in your app. Smooth animations, thoughtful interactions, and attention to detail throughout.
Clean, readable source code you'll actually want to maintain
Consistent design language across all components
Delightful interactions that users notice and remember
See it in action
Watch how components come together to build beautiful interfaces
patina-ui.com/docs/components
What's coming next
Our roadmap for building the best component library
Q1 2024
ShippedFoundation
- 24 free components
- 7 Pro blocks
- Light/dark themes
- TypeScript support
Q2 2024
ShippedExpansion
- 30+ Pro blocks
- Full shell templates
- CLI installation
- Extended docs
Q3 2024
In ProgressEnhanced
- Advanced animations
- More shells
- Dashboard components
- AI integrations
Q4 2024
PlannedScale
- Team features
- Component variants
- Figma plugin
- Enterprise support
Everything you need
Buttons, motion primitives, controls, cards, and more. Everything you need to build a modern app.
Heroes, features, pricing, testimonials, and conversion blocks. Ship complete sections in minutes.
Full templates for dashboards, auth flows, settings, mail, kanban, and more. Start with structure.
Theme tokens, accessibility, keyboard navigation, focus management. Built for real products.
Built for production
Every component is production-ready with theme support, accessibility, and keyboard navigation.
- Copy-paste ready components
- Theme tokens for light and dark
- Keyboard and screen reader tested
- No subscription, $49 one-time
Featured
Pro blocks unlock with $49
Get 80+ marketing blocks, 15+ app shells, and lifetime updates. No subscription. One payment, yours forever.
Learn moreEverything included
Professional components for building modern apps
120+ Components
Motion primitives, controls, buttons, cards, and everything in between.
Pro Blocks
Heroes, features, pricing, social proof, and conversion sections.
App Shells
Full templates for dashboards, auth, settings, mail, and more.
Theme System
Light and dark modes with customizable accent colors and radius.
Accessible
Keyboard navigation, focus management, and screen reader tested.
Copy-Paste
Every component is a single file. No hidden dependencies.
Everything you need, nothing you don't
A component library designed for real products
Copy-paste components
Full source code in every component. No hidden dependencies or compiled artifacts.
Ship faster
Stop rebuilding the same patterns. Focus on what makes your product unique.
Accessible by default
WCAG AA compliant. Keyboard navigation, screen readers, focus management—all handled.
From primitives to shells
Start with buttons and animations. Scale to complete marketing pages and dashboard templates. Everything works together.
Built for modern teams
The details that make a difference in production
Developer first
Built for developers who care about code quality. TypeScript, accessibility, and best practices included.
Design system ready
Integrates seamlessly with shadcn/ui. Consistent tokens, themes, and component patterns.
Motion design
Smooth animations that respect user preferences. Every interaction feels polished and intentional.
Production ready
Battle-tested components used by thousands. Responsive, accessible, and optimized for performance.