Controls
29 primitives
You must agree to continue
Receive updates via email
Basic tabs
Overview content goes here.
Four tabs
With icons
Settings style
Account Settings
Manage your account details
Compact variant
Overview content goes here.
Basic command menu
With icons
File actions menu
Outline trigger
Compact trigger
Horizontal Separator
Divides content sections
Section A
Content here
Section B
More content
16:9 ratio
1:1 ratio
npm install patina-ui
Right-click here to open context menu
Default combobox
With preselected value
With selection feedback
Language selector
Country selector
Disabled state
Default theme switcher
In navigation bar
With label
Compact layout
Inside settings card
Appearance
Customize how the app looks
Default calendar
11/5/2026
Compact size
6/15/2024
Without feedback
Today preselected
Today is highlighted
Past month view
January 2024
Scrollable list
Long content
Scroll Area
freeStyled scrollable container with custom scrollbar for fixed-height content.
View detailsLeft Panel
Right Panel
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.
Single select
Multi select