coss

Basic accordion

Accordion with one panel open

Accordion allowing multiple panels open

Controlled accordion

Basic alert

Alert with icon

Alert with icon and action buttons

Info alert

Success alert

Warning alert

Error alert

Alert dialog

Alert dialog with bare footer

Basic autocomplete

Autocomplete with grouped items

Autocomplete with limited number of results

Autocomplete with async items loading

Autocomplete form

Autocomplete form

Pill-shaped autocomplete

Address autocomplete with Google Maps Places API

Disabled autocomplete

Small autocomplete

Large autocomplete

Autocomplete with label

Autocomplete autofilling the input with the highlighted item

Autocomplete auto highlighting the first option

Autocomplete with clear button

Autocomplete with trigger and clear buttons

Avatar with image and fallback

Avatar with notification badge

Rounded avatar with notification badge

Avatar with verified badge

Small overlapping avatar group

Large overlapping avatar group

Fallback-only avatar

Avatars with different sizes

Avatars with different radii

Overlapping avatar group

Avatar with user icon fallback

Avatar with emerald status dot

Avatar with muted status dot

Rounded avatar with top-right emerald status

Basic badge

Large badge

Badge with icon

Badge with link

Badge with count

Full rounded badge (pill)

Badge with number after text

Status badge - Paid

Status badge - Pending

Status badge - Failed

Selectable badge with checkbox

Outline badge

Removable badge

Secondary badge

Destructive badge

Info badge

Success badge

Warning badge

Error badge

Small badge

Breadcrumb with menu example

Breadcrumb with custom separator

Breadcrumb with home icon for home link only

Breadcrumb with folders icon menu

Breadcrumb with icons before text

Breadcrumb with dot separators

Breadcrumb with select dropdown

Default button

Large button

Extra-large button

Disabled button

Icon button

Small icon button

Large icon button

Button with icon

Link rendered as button

Custom loading button with manual Spinner

Expandable show more/less toggle button

Outline button

Back link button with chevron

Card-style button with heading and description

Directional pad control buttons

Outline like button with count

Social login icon buttons

Star button with count badge

Button group with QR code icon and sign in

Button with avatar

Pill-shaped button with rounded-full styling

Secondary button

Button with animated arrow on hover

Button with keyboard shortcut indicator

Button with notification badge

Paired buttons (Cancel/Save)

Button with animated status dot

Icon-only copy button with feedback

Copy button with feedback

Rotating icon button (FAB-style toggle)

Social login buttons (Google, X, GitHub)

Hamburger menu button with animated icon

Destructive button

Download button with progress and cancel action

Button using the built-in loading prop

Destructive outline button

Ghost button

Link button

Extra-small button

Small button

Basic calendar

Calendar with rounded range selection style

Calendar with right-aligned navigation

Calendar with week numbers

Calendar with year-only combobox dropdown

Calendar without arrow navigation (dropdown only)

Calendar with current month button

Calendar with today button

Calendar with date input

Calendar with time input

Calendar with time slots (appointment picker)

Calendar with custom cell size

Calendar with date presets

Range calendar with date presets

Two months calendar

Three months calendar

Pricing calendar with custom day buttons

Calendar with 24-hour autocomplete time input

Calendar with date range selection

Calendar with month/year dropdown navigation

Calendar with custom Select dropdown for month/year

Calendar with Combobox dropdown for month/year

Calendar with disabled dates

Calendar with multiple date selection

Calendar with rounded day buttons

A basic card with header and footer

Card within a frame with header and footer

CardFrame with header action

Authentication card with actions

Authentication card with separators

Framed card with footer

Framed card with header

Framed card with header and footer

Framed card with no rounded bottom

Card within a frame and footer

Card within a frame and footer

Basic checkbox

Disabled checkbox

Checkbox with description

Card-style checkbox

Checkbox form

Basic checkbox group

Checkbox group with disabled items

Checkbox group with parent checkbox

Nested checkbox group with parent

Checkbox group form

Basic collapsible

Basic combobox

Combobox with input inside popup

Combobox form

Combobox multiple form

Combobox with start addon

Combobox multiple with start addon

Pill-shaped combobox

Timezone combobox

Timezone combobox with search input

Combobox with select trigger

Combobox multiple with stacked chips

Disabled combobox

Combobox multiple with stacked divided chips

Small combobox

Large combobox

Combobox with label

Combobox auto highlighting the first option

Combobox with clear button

Combobox with grouped items

Combobox with multiple selection

Command palette with dialog

Command palette with AI assistant

Basic context menu

Context menu with link items

Nested context menu

Context menu with checkbox items

Context menu with group labels

Context menu with icons

Context menu with radio group

Context menu with switch checkbox items

Basic date picker

Date range picker

Date picker with field and dropdown navigation

Date picker with presets

Date picker with input

Date picker that closes on select

Multiple dates picker

Date picker with select-like trigger

Two months calendar with range date

Dialog with form

Dialog opened from menu

Nested dialogs

Dialog with close confirmation

Dialog with long content

Dialog with bare footer

Simple bottom drawer with close button

Edit profile form with default and bare footer variants

Mobile menu drawer from the left

Responsive edit profile: dialog on desktop, drawer on mobile

Responsive actions menu: menu on desktop, drawer on mobile

Left drawer with swipe area

Bottom drawer without drag bar

Drawer with close button

Inset variant drawers for all four positions

Straight variant drawers for all four positions

Scrollable content with terms and conditions

Nested bottom drawers with centered content

Nested right drawers with inset variant

Bottom drawer with snap points

Empty state with icon and actions

Field with description

Field with textarea

Field with select

Field with checkbox

Field with checkbox group

Field with radio group

Field with toggle switch

Field with slider

Field with number field

Complete form built with field

Field with required indicator

Field in disabled state

Field showing validation error

Show field validity state

Input group with field

Field with autocomplete

Field with combobox

Field with multiple selection combobox

Fieldset with multiple fields

Input in a form

Form with zod validation

Basic frame

Frame with collapsible content and delete button

Frame with multiple separated panels

Frame with multiple stacked panels

Basic group

Nested groups

Group with popup

Group with input group

Group with menu

Group with select

Group with search

Group with add button and input

Group with input and currency text

Group with select and input

Group with input and select

Group with input

Group with input and text button

Group with two number inputs for range

Group with filter label, combobox multi-select, and remove button

Small group

Large group

Group with disabled button

Group with default button

Group with start text

Group with end text

Vertical group

Basic input

Input group mimicking a URL bar

Input group with keyboard shortcut

Input group with start loading spinner

Input with label and required indicator

Input with optional label

Input with custom border and background

Input group with end loading spinner

Read-only input

Input with characters remaining counter

Pill-shaped input

Small input

Large input

Disabled input

File input

Input with label

Input with button using Group

Input with start text and end tooltip

Password input with toggle visibility

Basic input group

Input group with badge

Input group with keyboard shortcut

Input group with inner label

Small input group

Large input group

Disabled input group

Input group with loading spinner

Input group with textarea

Input group with badge and menu

Mini editor built with input group and toggle

Input group with end icon

Input group with search icon

Input group with start tooltip

Input group with clear button

Search input group with loader and voice button

Input group with character counter

Password input with strength indicator

Code snippet input with language selector

Message composer with attachment buttons

Chat input with voice and send buttons

Input group with start text

Input group with end text

Input group with start and end text

Input group with number field

Input group with end tooltip

Input group with icon button

Input group with button

Keyboard shortcuts display

Basic menu

Menu with hover

Menu with checkbox

Menu with radio group

Menu with link

Menu with group labels

Nested menu

Menu close on click

Menu with checkbox items as switches

Basic meter

Simple meter

Meter with formatted value

Meter with range

Segmented navigation built with links

Small segmented navigation built with links

Large segmented navigation built with links

Basic number field

Number field in form

Pill-shaped number field

Small number field

Large number field

Disabled number field

Number field with label

Number field with scrub

Number field with range

Number field with formatted value

Number field with step

Basic OTP field

Masked OTP field

Large OTP field

OTP field with separator

OTP field with label

OTP field with custom sanitization

OTP field with auto validation

Alphanumeric OTP field

OTP field with placeholder hints