Patina

Command Palette

Search for a command to run...

Sign inGet Pro

Data

15 primitives

ButtonsCardsChartsChromeControlsDataEffectsFeedbackInputsModalsMotionText
AB
CD
EF

Avatar

free

User profile picture with fallback.

View details
Small
JD
JS
BJ
AB
+2
Medium
JD
JS
BJ
AB
+2
Large
JD
JS
BJ
AB
+2

Avatar Group

free

Stacked user avatars with overflow count.

View details

No documents found

Get started by creating your first document.

Empty State

free

Placeholder for zero-data views with optional action.

View details

Total Revenue

$45,231

+20.1%from last month

Active Users

2,350

+12.5%from last month

Bounce Rate

32.4%

4.3%from last month

Stat Tile

free

KPI card with value, trend, and optional icon.

View details
NameEmailStatus
John Doejohn@example.comActive
Jane Smithjane@example.comActive
Bob Johnsonbob@example.comInactive

Data Table

free

Simple table with custom column renderers.

View details
5
99+

Data Badge

free

Count indicator with dot or number.

View details
Plain UI
import { Button } from "@/components/ui";

function App() {
  return (
    <Button variant="default">
      Click me
    </Button>
  );
}
With Patina
import { ShimmerButton } from "@patina/components";

function App() {
  return (
    <ShimmerButton>
      Click me
    </ShimmerButton>
  );
}

Code Compare

free

Side-by-side before/after code panels with view toggle.

View details
src
components
lib
app.tsx
package.json
tsconfig.json

File Tree

free

Expandable folder tree with keyboard-friendly navigation.

View details

Catalog Statistics

Components
135
Blocks
75
Shells
23
Free
168
Pro
65

Bar Chart

free

Simple SVG bar chart with theme tokens and hover states.

View details

Default data grid

License ID
Customer
Plan
Status
Seats
MRR
LIC-001Acme CorpEnterpriseactive50$999
LIC-002Beta IncProactive10$199
LIC-003Gamma LLCStartertrial5$0
LIC-004Delta SystemsProexpired15$0
LIC-005Epsilon TechEnterpriseactive100$1999

Compact grid

License ID
Customer
Plan
Status
Seats
MRR
LIC-001Acme CorpEnterpriseactive50$999
LIC-002Beta IncProactive10$199
LIC-003Gamma LLCStartertrial5$0

Dense grid with pagination

License ID
Customer
Plan
Status
Seats
MRR
LIC-001Acme CorpEnterpriseactive50$999
LIC-002Beta IncProactive10$199
LIC-003Gamma LLCStartertrial5$0
LIC-004Delta SystemsProexpired15$0
LIC-005Epsilon TechEnterpriseactive100$1999
LIC-006Zeta IndustriesProactive25$499
LIC-007Eta LabsStarteractive8$99
LIC-008Theta SolutionsEnterprisetrial75$0
LIC-009Iota VenturesProactive20$399
LIC-010Kappa DigitalStarterexpired5$0
Rows per page:
Page 1 of 3

Empty state

License ID
Customer
Plan
Status
Seats
MRR
No data available

Data Grid

free

TanStack Table grid with sortable columns, row selection, status badges, and pagination.

View details

Empty filter bar

Filter bar with active filters

Status is activePlan is Pro

Filter bar with one filter

Status is active

Filters

free

Add filter bar with field, operator, and value chips. Removable with Clear all action.

View details

Calendar with events (click day to create, click event to edit)

November 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat

Empty calendar (interactive - try creating events)

November 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat

Event Calendar

free

Month grid calendar with event list and day selection panel.

View details

Dense kanban board (drag cards)

Todo

6

Add phone-input component

Country code selector with formatting

mediumAN2h

Update documentation

Add examples and usage guide

low1h

Mobile responsive nav

Hamburger menu with drawer

highSK3h

Error boundary setup

Catch and display errors gracefully

lowJD1h

Write unit tests

Achieve 80% code coverage

mediumAN5h

Performance audit

Lighthouse score optimization

low3h

Doing

4

Add filters component

Implement chip-based filter bar

highSK3h

Implement auth flow

Add OAuth and magic link support

highJD8h

API rate limiting

Implement token bucket algorithm

medium2h

Database migrations

Version control for schema changes

mediumSK2h

Done

3

Add data-grid component

Build TanStack Table integration

highJD5h

Design system tokens

Define color scales and spacing

mediumAN4h

Set up CI/CD pipeline

GitHub Actions deployment workflow

high6h

Compact kanban board

Todo

1

Design review

high

Doing

1

Code review

mediumJD

Done

1

Deploy to prod

high1h

Kanban Board

free

Drag-and-drop kanban board with smooth animations and cross-column movement.

View details

Basic tree

src
index.ts
utils.ts
package.json

Deeply nested folders

project
package.json
tsconfig.json

With custom icons

repository
README.md
config.json

Assets folder tree

assets

Tree

free

File/folder tree with expand/collapse, keyboard, selected item.

View details