Color picker with color swatch

Blocks Templates Patterns Starter kits Themes Changelog

Sign in Get full access

Patterns
Color picker
With color swatch

/

Avatar

Basic Fallback Group Initials Size Square

Badge

Basic Danger Info Outline Secondary Success Warning With border With icon With link With solid background

Bar list

Basic Controlled With card With link

Breadcrumbs

Basic Slash separator With icon With menu

Button

Button with icon Circle Custom background Custom design Danger Disabled Info Inline alert Large Outline Plain Primary Secondary Small Square State Subtle danger Subtle info Subtle primary Subtle success Subtle warning Subtle with icon Success Warning

Button group

Basic Disabled Vertical With icon With menu With text

Card

Basic Constrained with description list Custom style Gutter With action With description list With details

Checkbox

Basic Controlled Custom background Default selected Disabled Invalid Readonly Uncontrolled With checkbox group With description With fieldset

Choice box

Multiple choice Single choice With card With default selected With gap With gap columns With icon With link With modal With sheet

Code block

Basic Other lang With copy button With line numbers With max height

Color picker

Basic Channel slider With color slider With color swatch

Color slider

Basic Disabled Orientation With label

Color swatch

Basic Custom size

Color swatch picker

Basic Custom size

Color wheel

Basic Controlled Disabled

Combo box

Basic Controlled Custom value Disabled Invalid Multiple select Readonly Uncontrolled With avatar With avatar and description With description With description on item With fieldset With icons With label

Date field

Basic Controlled Uncontrolled Validation With description With fieldset With label

Date picker

Basic Controlled Disabled Readonly Uncontrolled Validation With description With fieldset With time

Date range picker

Basic Disabled Readonly With fieldset

Description list

Basic Full width with card Full width with modal Full width with sheet With badge With card With disclosure With modal With sheet

Detail line

Basic With badge With card

Details

Basic With badge With icon With link With modal With sheet With text

Disclosure group

Basic Controlled Custom style Disabled Inside modal Inside sheet Multiple expanded Nested With form

Fieldset

Basic Disabled With card With custom layout With field group With grid layout With legend With text

File trigger

Accept directory Controlled Multiple files With drop zone

Grid list

Basic Controlled Disabled Drag between grid Draggable Multiple selection Regular list Single selection With avatar With link With menu With section Without selection

Heading

Level 1 Level 2 Level 3 Level 4 With actions

Input otp

Controlled Disabled Only letters Only numbers Pin Validation With pattern With separator With timer

Keyboard

Basic Custom background With button With input group With menu With toggle

Leaderboard

Basic Currency On action Percentages With header With header actions With icon With scroll area

Link

Basic Custom style Text link With button style With text

Menu

Arrow Basic Blur overlay Danger item Disabled item For user Multiple Multiple user On action Open modal Placement Section level section Warning item With autocomplete With avatar With avatar and description With avatar trigger With description With link With section With shortcut With sticky header With submenu With table

Meter

Basic Full With description With value label props

Modal

Alert dialog Basic Controlled Custom close Custom style 1 Custom style 2 Custom style 3 Custom style 4 Dialog Fullscreen Nested Sticky With checkbox With form submit With icon With switch

Multiple select

Basic With description

Native select

Basic Controlled Disabled Invalid Uncontrolled With description With fieldset With label With opt group

Note

Basic Danger Info Inside toast No indicator Success Warning

Number field

Basic Compact Controlled Currency Disabled Percent Units With description With field error With fieldset With label With link after label

Password field

Basic With anonation

Popover

Arrow Basic Emoji picker Nested Placement With avatar trigger With description list With detail line With details With dialog With form With grid list With tabs

Progress bar

Basic Controlled With description

Radio

Basic Custom background Disabled Invalid With checkbox With description With fieldset

Scroll area

Basic Fade Fade with gutter Horizontal Vertical With modal With sheet

Search field

Basic Controlled Disabled Readonly Uncontrolled With custom input With description With keyboard With label

Select

Basic Controlled Disabled Invalid Multiple Uncontrolled With autocomplete With avatar With avatar and description With description With description on item With fieldset With icons With label

Sheet

Basic Controlled Custom close Float Position Sticky

Slider

Basic Controlled Custom style Orientation Square thumb Step

Snippets

Switch

Basic Controlled Custom background Default selected Disabled Readonly Uncontrolled With description With fieldset

Table

Basic Bulk actions Draggable Expandable Full width with card Full width with modal Grid Sortable Stripped With action With columns selection With menu actions With pagination With search With tanstack table

Tabs

Basic Circle with border Fill black white Fill danger Fill danger subtle Fill info subtle Fill primary Fill primary subtle Fill secondary Fill success subtle Fill warning Fill warning subtle Fill with circle container Fill with motion Keyboard activation Scrollable Scrollable on mobile Vertical With border With circle item With danger color With foreground color With icon With info color With link With success color With warning color

Tag field

Basic Controlled input Disabled Invalid tag input Readonly Uncontrolled input

Tag group

Allow remove Controlled selection Default selected Disabled selection Link Multiple selection Single selection With fieldset

Text

Basic With badge With fieldset With input group With link

Text field

Basic Controlled Disabled Readonly Uncontrolled Validation with zod With button With field error With fieldset With input group With link after label With native select

Textarea

Basic With tabs

Time field

Basic Controlled Uncontrolled Validation With description With fieldset With label

Toast

Basic Error Info Promise Success

Toggle

Basic Controlled Outline Size Square size Uncontrolled

Toggle group

Basic Controlled Custom background Multiple Size Square size Subtle danger Subtle info Subtle primary Subtle success Subtle warning Uncontrolled With motion

Tooltip

Basic Bigger Full rounded Inverse No delay Placement With pressable Without arrow

Tracker

Basic Custom background With card Without tooltip

Tree

Basic Controlled Default expanded Disabled Disabled selection Draggable Multiple On action With icons

Color-picker / With color swatch