Patina
Sign inGet Pro

App Shells & Templates

Complete product surfaces. Full-page templates you can drop into your Next.js app. All Pro. All previewable.

🎉 New: 7 Interactive Shells

Beautiful components for modern apps

Motion-first components and assembled blocks. Free primitives, Pro sections. Built for Next.js with Tailwind CSS.

Everything you need

Built with accessibility and performance in mind

Motion First

Smooth animations with Framer Motion, respecting prefers-reduced-motion

Fully Typed

Complete TypeScript support with full type safety and IntelliSense

Copy & Paste

No package lock-in. You own the code, modify it as needed

Accessible

WCAG compliant components with keyboard navigation support

Responsive

Mobile-first design that works beautifully on all screen sizes

Dark Mode

Built-in dark mode support with system preference detection

Simple, transparent pricing

One-time payment. Lifetime access.

Free

Perfect for trying out Patina

$0
  • 34 free primitives
  • Community support
  • TypeScript types
  • MIT license
Most Popular

Pro

Everything you need to ship

$49/ one-time
  • All free primitives
  • 58+ pro blocks
  • 7 app shells
  • Priority support
  • Lifetime updates
  • Commercial license

Teams

For growing teams

$199/ one-time
  • Everything in Pro
  • 5 team seats
  • Shared workspace
  • Team billing
  • Dedicated support

Loved by developers

See what people are saying about Patina

Patina has completely transformed how I build landing pages. The components are beautiful and the code quality is top-notch.

Sarah Chen

Frontend Developer

The attention to detail in these components is incredible. Every animation feels polished and purposeful.

Alex Morgan

Product Designer

Best $49 I've ever spent. Shipped my SaaS landing page in a weekend using Patina blocks.

Jamie Taylor

Indie Hacker

Frequently asked questions

Everything you need to know about Patina

Ready to build something amazing?

Join thousands of developers building beautiful products with Patina.

SaaS Marketing

pro

Complete landing: nav, hero, logo cloud, bento, features, pricing, FAQ, footer.

templates

Command Palette

Search for a command to run...

Overview

Live

Total Revenue

$0

+12.5% from last month

Active Users

0

+8.2% from last month

Conversion Rate

0%

+0.4% from last month

Avg. Session

0m

-0.3% from last month

Revenue Trend

Last 30 days
JanDec

Top Customers

Alice Johnson

alice@example.com

$12,450

Bob Smith

bob@example.com

$8,230

Carol White

carol@example.com

$5,600

David Lee

david@example.com

$15,890

Emma Davis

emma@example.com

$3,200

All Customers

EmailStatusJoined
Alice Johnson
alice@example.com
active
$12,450.00
1/14/2024
Bob Smith
bob@example.com
active
$8,230.00
2/19/2024
Carol White
carol@example.com
pending
$5,600.00
3/9/2024
David Lee
david@example.com
active
$15,890.00
1/4/2024
Emma Davis
emma@example.com
inactive
$3,200.00
4/11/2024
0 of 5 row(s) selected.
Page 1 of 1

Dashboard

pro

App chrome with sidebar, topbar, KPI cards, data table, and chart panels.

templates

Profile Settings

Manage your account information and preferences.

JPG or PNG, max 2MB

Max 500 characters

Settings

pro

Account, billing, and team settings with tabbed navigation.

templates

Welcome back

Sign in to continue to your dashboard

Or continue with

Don't have an account?

By continuing, you agree to our Terms and Privacy Policy

Auth Flow

pro

Login and signup screens as a complete product surface.

templates

React component architecture

Can you help me build a responsive navbar component?

07:32 PM

I'd be happy to help! Here's a responsive navbar component using React and Tailwind CSS. This implementation includes mobile menu support and smooth transitions.

07:33 PM

How can I add a search feature to this navbar?

07:34 PM

Great question! You can add a search feature by integrating a command palette using cmdk. Here's how to implement it with keyboard shortcuts and fuzzy search.

07:35 PM

AI can make mistakes. Check important info.

AI Chat

pro

Chat interface with thread list and composer.

templates

Billing & Usage

Manage your subscription and view billing history

Pro Plan

Active

Unlimited access to all components, blocks, and shells

$0/month

Purchased on January 15, 2024

Payment Method

•••• •••• •••• 4242

Expires 12/25

Usage Overview

Component downloads last 6 months

Last 6 months
Jan
Feb
Mar
Apr
May
Jun

Total Downloads

477

Avg per Month

79.5

Peak Month

Apr (91)

Growth

+12.8%

Invoice History

Invoice IDDescriptionStatus
7/31/2024
Pro Plan - August 2024
$49.00
paid
6/30/2024
Pro Plan - July 2024
$49.00
paid
5/31/2024
Pro Plan - June 2024
$49.00
paid
4/30/2024
Pro Plan - May 2024
$49.00
paid
3/31/2024
Pro Plan - April 2024
$49.00
pending
Showing 5 of 8 invoice(s)
Page 1 of 2

Billing Information

Email

john@example.com

Billing Address

123 Main St, San Francisco, CA 94105

Tax ID

US123456789

Next Billing Date

September 1, 2024

Billing Portal

pro

Invoices, plan management, and usage tracking.

templates

Getting Started

Introduction

Patina is a freemium component library for Next.js. Motion primitives stay public. Marketing blocks unlock once.

What is Patina?

Patina is a companion kit for shadcn/ui that provides motion-first components and assembled marketing blocks. The primitives are always free. The composed sections are Pro.

Quick Tip

All components respect prefers-reduced-motion and work with keyboard navigation.

Key Features

  • Motion-first — Built on Framer Motion with accessibility in mind
  • Freemium model — 34 free primitives, 58+ pro blocks
  • Copy-paste — No package lock-in, you own the code
  • TypeScript — Full type safety and IntelliSense
Getting Started / Introduction

Documentation

pro

Docs layout with sidebar navigation and content area.

templates