Patina

Command Palette

Search for a command to run...

Sign inGet Pro

Controls

29 primitives

Segmented Control

free

Animated pill toggle group.

View details
Press ⌘ K to search
or Ctrl + C to copy

Keyboard Key

free

Display keyboard shortcuts in a styled badge.

View details
Volume50%

Slider

free

Draggable range input with gradient fill.

View details

Toggle

free

Binary button with pressed state indication.

View details

Radio Group

free

Single-choice selector with visual cards.

View details
Pick your brand color
#3b82f6

Color Picker

free

Native color input with hex display.

View details
Rate your experience
3 out of 5 stars

Rating

free

Five-star input with hover preview.

View details

You must agree to continue

Checkbox

free

Single checkbox with label support.

View details

Receive updates via email

Switch

free

Toggle switch for binary settings.

View details

Stepper

free

Progress indicator for multi-step flows.

View details

Checkbox Group

free

Multi-select with check animations.

View details

Basic tabs

Overview content goes here.

Four tabs

Dashboard overview and quick stats.

With icons

Home content

Settings style

Account Settings

Manage your account details

Compact variant

Overview content goes here.

Tabs

free

Horizontal tab switcher with sliding indicator.

View details

Basic command menu

With icons

File actions menu

Outline trigger

Compact trigger

Command Menu

free

Keyboard-first command palette.

View details
Patina UI is a collection of copy-paste React components built with Tailwind CSS.
Yes, Patina UI offers both free components and premium blocks for more advanced features.
Absolutely! Copy the components and customize them to fit your needs.

Accordion

free

Collapsible content sections with single or multiple expansion.

View details

Horizontal Separator

Divides content sections

Section A

Content here

Section B

More content

Separator

free

Horizontal or vertical line to divide content sections.

View details
Page 1 of 10

Pagination

free

Page navigation with prev/next and numbered pages.

View details

16:9 ratio

16:9

1:1 ratio

1:1

Aspect Ratio

free

Maintain consistent aspect ratios for responsive media containers.

View details
npm install patina-ui

Copy to Clipboard

free

Button to copy text with visual feedback confirmation.

View details

Right-click here to open context menu

Context Menu

free

Right-click menu with custom actions and keyboard support.

View details

Default combobox

With preselected value

With selection feedback

Language selector

Country selector

Disabled state

Combobox

free

Searchable select dropdown with keyboard navigation.

View details

Multi Select

free

Select multiple options with chip-style display and removal.

View details

Default theme switcher

In navigation bar

Settings

With label

Theme

Compact layout

Inside settings card

Appearance

Customize how the app looks

Theme Switcher

free

Toggle between light and dark mode with icon indicator.

View details

Theme Customizer

Preview: Accent, radius, font, and density apply live across the site. Sign in with Pro or Deluxe to persist across refresh.

Theme Customizer

pro

Live theme editor with accent, radius, font, and density controls.

View details

Default calendar

November 2026
Su
Mo
Tu
We
Th
Fr
Sa

11/5/2026

Compact size

November 2026
Su
Mo
Tu
We
Th
Fr
Sa

6/15/2024

Without feedback

November 2026
Su
Mo
Tu
We
Th
Fr
Sa

Today preselected

November 2026
Su
Mo
Tu
We
Th
Fr
Sa

Today is highlighted

Past month view

November 2026
Su
Mo
Tu
We
Th
Fr
Sa

January 2024

Calendar

free

Month grid calendar with day selection and prev/next navigation.

View details

Scrollable list

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Item 31
Item 32
Item 33
Item 34
Item 35
Item 36
Item 37
Item 38
Item 39
Item 40
Item 41
Item 42
Item 43
Item 44
Item 45
Item 46
Item 47
Item 48
Item 49
Item 50

Long content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Scroll Area

free

Styled scrollable container with custom scrollbar for fixed-height content.

View details

Left Panel

Right Panel

Resizable

free

Draggable divider between two resizable panels.

View details

Install Patina components to your Next.js project via the shadcn CLI. Add the registry to your components.json and run the add command.

View the full API documentation for each component, including props, variants, and usage examples.

Find answers to common questions about licensing, installation, and usage.

Collapsible

free

Toggle to show/hide content with chevron indicator.

View details

Single select

Multi select

Toggle Group

free

Multi or single select chip group with active states.

View details