Blocks - Coss UI | registry.directory

C

cosscom/coss/blocks

p-accordion-1Basic accordion

p-accordion-2Accordion with one panel open

p-accordion-3Accordion allowing multiple panels open

p-accordion-4Controlled accordion

p-alert-1Basic alert

p-alert-2Alert with icon

p-alert-3Alert with icon and action buttons

p-alert-4Info alert

p-alert-5Success alert

p-alert-6Warning alert

p-alert-7Error alert

p-alert-dialog-1Alert dialog

p-alert-dialog-2Alert dialog with bare footer

p-autocomplete-1Basic autocomplete

p-autocomplete-10Autocomplete with grouped items

p-autocomplete-11Autocomplete with limited number of results

p-autocomplete-12Autocomplete with async items loading

p-autocomplete-13Autocomplete form

p-autocomplete-14Autocomplete form

p-autocomplete-15Pill-shaped autocomplete

p-autocomplete-2Disabled autocomplete

p-autocomplete-3Small autocomplete

p-autocomplete-4Large autocomplete

p-autocomplete-5Autocomplete with label

p-autocomplete-6Autocomplete autofilling the input with the highlighted item

p-autocomplete-7Autocomplete auto highlighting the first option

p-autocomplete-8Autocomplete with clear button

p-autocomplete-9Autocomplete with trigger and clear buttons

p-avatar-1Avatar with image and fallback

p-avatar-10Avatar with notification badge

p-avatar-11Rounded avatar with notification badge

p-avatar-12Avatar with verified badge

p-avatar-13Small overlapping avatar group

p-avatar-14Large overlapping avatar group

p-avatar-2Fallback-only avatar

p-avatar-3Avatars with different sizes

p-avatar-4Avatars with different radii

p-avatar-5Overlapping avatar group

p-avatar-6Avatar with user icon fallback

p-avatar-7Avatar with emerald status dot

p-avatar-8Avatar with muted status dot

p-avatar-9Rounded avatar with top-right emerald status

p-badge-1Basic badge

p-badge-10Large badge

p-badge-11Badge with icon

p-badge-12Badge with link

p-badge-13Badge with count

p-badge-14Full rounded badge (pill)

p-badge-15Badge with number after text

p-badge-16Status badge - Paid

p-badge-17Status badge - Pending

p-badge-18Status badge - Failed

p-badge-19Selectable badge with checkbox

p-badge-2Outline badge

p-badge-20Removable badge

p-badge-3Secondary badge

p-badge-4Destructive badge

p-badge-5Info badge

p-badge-6Success badge

p-badge-7Warning badge

p-badge-8Error badge

p-badge-9Small badge

p-breadcrumb-1Breadcrumb with menu example

p-breadcrumb-2Breadcrumb with custom separator

p-breadcrumb-3Breadcrumb with home icon for home link only

p-breadcrumb-4Breadcrumb with folders icon menu

p-breadcrumb-5Breadcrumb with icons before text

p-breadcrumb-6Breadcrumb with dot separators

p-breadcrumb-7Breadcrumb with select dropdown

p-button-1Default button

p-button-10Large button

p-button-11Extra-large button

p-button-12Disabled button

p-button-13Icon button

p-button-14Small icon button

p-button-15Large icon button

p-button-16Button with icon

p-button-17Link rendered as button

p-button-18Loading button

p-button-19Expandable show more/less toggle button

p-button-2Outline button

p-button-20Back link button with chevron

p-button-21Card-style button with heading and description

p-button-22Directional pad control buttons

p-button-23Outline like button with count

p-button-24Social login icon buttons

p-button-26Star button with count badge

p-button-27Button group with QR code icon and sign in

p-button-28Button with avatar

p-button-29Pill-shaped button with rounded-full styling

p-button-3Secondary button

p-button-30Button with animated arrow on hover

p-button-31Button with keyboard shortcut indicator

p-button-32Button with notification badge

p-button-33Paired buttons (Cancel/Save)

p-button-34Button with animated status dot

p-button-35Icon-only copy button with feedback

p-button-36Copy button with feedback

p-button-37Rotating icon button (FAB-style toggle)

p-button-38Social login buttons (Google, X, GitHub)

p-button-39Hamburger menu button with animated icon

p-button-4Destructive button

p-button-40Download button with progress and cancel action

p-button-5Destructive outline button

p-button-6Ghost button

p-button-7Link button

p-button-8Extra-small button

p-button-9Small button

p-calendar-1Basic calendar

p-calendar-10Calendar with rounded range selection style

p-calendar-11Calendar with right-aligned navigation

p-calendar-12Calendar with week numbers

p-calendar-13Calendar with year-only combobox dropdown

p-calendar-14Calendar without arrow navigation (dropdown only)

p-calendar-15Calendar with current month button

p-calendar-16Calendar with today button

p-calendar-17Calendar with date input

p-calendar-18Calendar with time input

p-calendar-19Calendar with time slots (appointment picker)

p-calendar-2Calendar with custom cell size

p-calendar-20Calendar with date presets

p-calendar-21Range calendar with date presets

p-calendar-22Two months calendar

p-calendar-23Three months calendar

p-calendar-24Pricing calendar with custom day buttons

p-calendar-3Calendar with date range selection

p-calendar-4Calendar with month/year dropdown navigation

p-calendar-5Calendar with custom Select dropdown for month/year

p-calendar-6Calendar with Combobox dropdown for month/year

p-calendar-7Calendar with disabled dates

p-calendar-8Calendar with multiple date selection

p-calendar-9Calendar with rounded day buttons

p-card-1A basic card with header and footer

p-card-10Card within a frame with header and footer

p-card-11CardFrame with header action

p-card-2Authentication card with actions

p-card-3Authentication card with separators

p-card-4Framed card with footer

p-card-5Framed card with header

p-card-6Framed card with header and footer

p-card-7Framed card with no rounded bottom

p-card-8Card within a frame and footer

p-card-9Card within a frame and footer

p-checkbox-1Basic checkbox

p-checkbox-2Disabled checkbox

p-checkbox-3Checkbox with description

p-checkbox-4Card-style checkbox

p-checkbox-5Checkbox form

p-checkbox-group-1Basic checkbox group

p-checkbox-group-2Checkbox group with disabled items

p-checkbox-group-3Checkbox group with parent checkbox

p-checkbox-group-4Nested checkbox group with parent

p-checkbox-group-5Checkbox group form

p-collapsible-1Basic collapsible

p-combobox-1Basic combobox

p-combobox-10Combobox with input inside popup

p-combobox-11Combobox form

p-combobox-12Combobox multiple form

p-combobox-13Combobox with start addon

p-combobox-14Combobox multiple with start addon

p-combobox-15Pill-shaped combobox

p-combobox-16Timezone combobox

p-combobox-17Timezone combobox with search input

p-combobox-18Combobox with select trigger

p-combobox-2Disabled combobox

p-combobox-3Small combobox

p-combobox-4Large combobox

p-combobox-5Combobox with label

p-combobox-6Combobox auto highlighting the first option

p-combobox-7Combobox with clear button

p-combobox-8Combobox with grouped items

p-combobox-9Combobox with multiple selection

p-command-1Command palette with dialog

p-command-2Command palette with AI assistant

p-date-picker-1Basic date picker

p-date-picker-2Date range picker

p-date-picker-3Date picker with field and dropdown navigation

p-date-picker-4Date picker with presets

p-date-picker-5Date picker with input

p-date-picker-6Date picker that closes on select

p-date-picker-7Multiple dates picker

p-date-picker-8Date picker with select-like trigger

p-date-picker-9Two months calendar with range date

p-dialog-1Dialog with form

p-dialog-2Dialog opened from menu

p-dialog-3Nested dialogs

p-dialog-4Dialog with close confirmation

p-dialog-5Dialog with long content

p-dialog-6Dialog with bare footer

p-empty-1Empty state with icon and actions

p-field-1Field with description

p-field-10Field with textarea

p-field-11Field with select

p-field-12Field with checkbox

p-field-13Field with checkbox group

p-field-14Field with radio group

p-field-15Field with toggle switch

p-field-16Field with slider

p-field-17Field with number field

p-field-18Complete form built with field

p-field-2Field with required indicator

p-field-3Field in disabled state

p-field-4Field showing validation error

p-field-5Show field validity state

p-field-6Input group with field

p-field-7Field with autocomplete

p-field-8Field with combobox

p-field-9Field with multiple selection combobox

p-fieldset-1Fieldset with multiple fields

p-form-1Input in a form

p-form-2Form with zod validation

p-frame-1Basic frame

p-frame-2Frame with collapsible content and delete button

p-frame-3Frame with multiple separated panels

p-frame-4Frame with multiple stacked panels

p-group-1Basic group

p-group-10Nested groups

p-group-11Group with popup

p-group-12Group with input group

p-group-13Group with menu

p-group-14Group with select

p-group-15Group with search

p-group-16Group with add button and input

p-group-17Group with input and currency text

p-group-18Group with select and input

p-group-19Group with input and select

p-group-2Group with input

p-group-20Group with input and text button

p-group-22Group with two number inputs for range

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

p-group-3Small group

p-group-4Large group

p-group-5Group with disabled button

p-group-6Group with default button

p-group-7Group with start text

p-group-8Group with end text

p-group-9Vertical group

p-input-1Basic input

p-input-10Input group mimicking a URL bar

p-input-11Input group with keyboard shortcut

p-input-12Input group with start loading spinner

p-input-13Input with label and required indicator

p-input-14Input with optional label

p-input-15Input with custom border and background

p-input-16Input group with end loading spinner

p-input-17Read-only input

p-input-18Input with characters remaining counter

p-input-19Pill-shaped input

p-input-2Small input

p-input-3Large input

p-input-4Disabled input

p-input-5File input

p-input-6Input with label

p-input-7Input with button using Group

p-input-8Input with start text and end tooltip

p-input-9Password input with toggle visibility

p-input-group-1Basic input group

p-input-group-10Input group with badge

p-input-group-11Input group with keyboard shortcut

p-input-group-12Input group with inner label

p-input-group-13Small input group

p-input-group-14Large input group

p-input-group-15Disabled input group

p-input-group-16Input group with loading spinner

p-input-group-17Input group with textarea

p-input-group-18Input group with badge and menu

p-input-group-19Mini editor built with input group and toggle

p-input-group-2Input group with end icon

p-input-group-20Input group with search icon

p-input-group-21Input group with start tooltip

p-input-group-22Input group with clear button

p-input-group-23Search input group with loader and voice button

p-input-group-24Input group with character counter

p-input-group-26Password input with strength indicator

p-input-group-27Code snippet input with language selector

p-input-group-28Message composer with attachment buttons

p-input-group-29Chat input with voice and send buttons

p-input-group-3Input group with start text

p-input-group-4Input group with end text

p-input-group-5Input group with start and end text

p-input-group-6Input group with number field

p-input-group-7Input group with end tooltip

p-input-group-8Input group with icon button

p-input-group-9Input group with button

p-kbd-1Keyboard shortcuts display

p-menu-1Basic menu

p-menu-2Menu with hover

p-menu-3Menu with checkbox

p-menu-4Menu with radio group

p-menu-5Menu with link

p-menu-6Menu with group labels

p-menu-7Nested menu

p-menu-8Menu close on click

p-menu-9Menu with checkbox items as switches

p-meter-1Basic meter

p-meter-2Simple meter

p-meter-3Meter with formatted value

p-meter-4Meter with range

p-number-field-1Basic number field

p-number-field-10Number field in form

p-number-field-11Pill-shaped number field

p-number-field-2Small number field

p-number-field-3Large number field

p-number-field-4Disabled number field

p-number-field-5Number field with label

p-number-field-6Number field with scrub

p-number-field-7Number field with range

p-number-field-8Number field with formatted value

p-number-field-9Number field with step

p-pagination-1Pagination example

p-pagination-2Pagination with previous and next buttons only

p-pagination-3Pagination with select, and previous and next buttons

p-popover-1Popover with a form

p-popover-2Popover with close button

p-popover-3Animated popovers

p-preview-card-1Preview card with popup

p-progress-1Basic progress bar

p-progress-2Progress with label and value

p-progress-3Progress with formatted value

p-radio-group-1Basic radio group

p-radio-group-2Disabled radio group

p-radio-group-3Radio group with description

p-radio-group-4Radio group card

p-radio-group-5Radio group in form

p-scroll-area-1Basic scroll area

p-scroll-area-2Horizontal scroll area

p-scroll-area-3Scroll area with both directions

p-scroll-area-4Scroll area with fading edges

p-scroll-area-5Horizontal scroll area with scrollbar gutter

p-select-1Basic select

p-select-10Select with object values

p-select-11Select in form

p-select-12Select with disabled items

p-select-13Timezone select

p-select-14Status select with colored dot

p-select-15Pill-shaped select trigger

p-select-16Select with left text label

p-select-17Select with country flags

p-select-18Select with description in options only

p-select-19Select with avatars

p-select-2Small select

p-select-20Rich select with avatars and usernames

p-select-21Auto width select

p-select-22Select with custom border and background

p-select-3Large select

p-select-4Disabled select

p-select-5Select without item alignment

p-select-6Select with groups

p-select-7Multiple select

p-select-8Select with icon

p-select-9Select options with icon

p-separator-1Separator with horizontal and vertical orientations

p-sheet-1Basic sheet

p-sheet-2Sheet inset

p-sheet-3Sheet position

p-skeleton-1Basic skeleton

p-skeleton-2Skeleton only

p-slider-1Basic slider

p-slider-10Range slider with collision behavior swap

p-slider-11Slider with icons

p-slider-12Slider with input

p-slider-13Range slider with inputs

p-slider-14Slider with increment and decrement buttons

p-slider-15Price range slider

p-slider-16Emoji rating slider

p-slider-17Vertical slider

p-slider-18Vertical range slider

p-slider-19Vertical slider with input

p-slider-2Slider with label and value

p-slider-20Equalizer with vertical sliders

p-slider-21Object position sliders with reset

p-slider-22Price slider with histogram

p-slider-23Slider in form

p-slider-3Disabled slider

p-slider-4Slider with reference labels

p-slider-5Slider with ticks

p-slider-6Slider with labels above

p-slider-7Range slider

p-slider-8Slider with 3 thumbs

p-slider-9Range slider with collision behavior none

p-spinner-1Basic spinner

p-switch-1Basic switch

p-switch-2Disabled switch

p-switch-3Switch with description

p-switch-4Switch card

p-switch-5Switch in form

p-switch-6Custom size switch

p-table-1Basic table

p-table-2Framed table

p-table-3Table with TanStack Table and checkboxes

p-table-4Table with TanStack Table, sorting, and pagination

p-tabs-1Basic tabs

p-tabs-10Tabs with count badge

p-tabs-11Vertical tabs with underline and icon before name

p-tabs-12Tabs with icon only and count badge

p-tabs-13Tabs with icon only and grouped tooltips

p-tabs-2Tabs with underline

p-tabs-3Vertical tabs

p-tabs-4Vertical tabs with underline

p-tabs-5Tabs with full rounded triggers

p-tabs-6Tabs with icon before name

p-tabs-7Tabs with icon before name and underline

p-tabs-8Tabs with icon only

p-tabs-9Tabs with underline and icon on top

p-textarea-1Basic textarea

p-textarea-10Read-only textarea

p-textarea-11Textarea with characters remaining counter

p-textarea-12Textarea field with required indicator

p-textarea-13Shorter textarea with fixed height

p-textarea-14Textarea with button aligned right

p-textarea-15Textarea with button aligned left

p-textarea-2Small textarea

p-textarea-3Large textarea

p-textarea-4Disabled textarea

p-textarea-5Textarea with label

p-textarea-6Textarea in form

p-textarea-7Textarea with label and required indicator

p-textarea-8Textarea with optional label

p-textarea-9Textarea with custom border and background

p-toast-1Basic toast

p-toast-2Toast with status

p-toast-3Loading toast

p-toast-4Toast with action

p-toast-5Promise toast

p-toast-6Toast with varying heights

p-toast-7Anchored toast with tooltip style

p-toast-8Anchored toast

p-toast-9Promise toast with cancel action

p-toggle-1Basic toggle

p-toggle-2Toggle with outline

p-toggle-3Toggle with icon

p-toggle-4Small toggle

p-toggle-5Large toggle

p-toggle-6Disabled toggle

p-toggle-7Toggle icon group

p-toggle-8Bookmark toggle with tooltip and success toast

p-toggle-group-1Basic toggle group

p-toggle-group-2Small toggle group

p-toggle-group-3Large toggle group

p-toggle-group-4Toggle group with outline

p-toggle-group-5Vertical toggle group with outline

p-toggle-group-6Disabled toggle group

p-toggle-group-7Toggle group with disabled item

p-toggle-group-8Multiple selection toggle group

p-toggle-group-9Toggle group with tooltips

p-toolbar-1Toolbar with toggles, buttons, and select

p-tooltip-1Basic tooltip

p-tooltip-2Grouped tooltips

p-tooltip-3Toggle group animated tooltip

p-tooltip-4Vertical group with animated tooltip

p-accordion-1Basic accordion

p-accordion-2Accordion with one panel open

p-accordion-3Accordion allowing multiple panels open

p-accordion-4Controlled accordion

p-alert-1Basic alert

p-alert-2Alert with icon

p-alert-3Alert with icon and action buttons

p-alert-4Info alert

p-alert-5Success alert

p-alert-6Warning alert

p-alert-7Error alert

p-alert-dialog-1Alert dialog

p-alert-dialog-2Alert dialog with bare footer

p-autocomplete-1Basic autocomplete

p-autocomplete-10Autocomplete with grouped items

p-autocomplete-11Autocomplete with limited number of results

p-autocomplete-12Autocomplete with async items loading

p-autocomplete-13Autocomplete form

p-autocomplete-14Autocomplete form

p-autocomplete-15Pill-shaped autocomplete

p-autocomplete-2Disabled autocomplete

p-autocomplete-3Small autocomplete

p-autocomplete-4Large autocomplete

p-autocomplete-5Autocomplete with label

p-autocomplete-6Autocomplete autofilling the input with the highlighted item

p-autocomplete-7Autocomplete auto highlighting the first option

p-autocomplete-8Autocomplete with clear button

p-autocomplete-9Autocomplete with trigger and clear buttons

p-avatar-1Avatar with image and fallback

p-avatar-10Avatar with notification badge

p-avatar-11Rounded avatar with notification badge

p-avatar-12Avatar with verified badge

p-avatar-13Small overlapping avatar group

p-avatar-14Large overlapping avatar group

p-avatar-2Fallback-only avatar

p-avatar-3Avatars with different sizes

p-avatar-4Avatars with different radii

p-avatar-5Overlapping avatar group

p-avatar-6Avatar with user icon fallback

p-avatar-7Avatar with emerald status dot

p-avatar-8Avatar with muted status dot

p-avatar-9Rounded avatar with top-right emerald status

p-badge-1Basic badge

p-badge-10Large badge

p-badge-11Badge with icon

p-badge-12Badge with link

p-badge-13Badge with count

p-badge-14Full rounded badge (pill)

p-badge-15Badge with number after text

p-badge-16Status badge - Paid

p-badge-17Status badge - Pending

p-badge-18Status badge - Failed

p-badge-19Selectable badge with checkbox

p-badge-2Outline badge

p-badge-20Removable badge

p-badge-3Secondary badge

p-badge-4Destructive badge

p-badge-5Info badge

p-badge-6Success badge

p-badge-7Warning badge

p-badge-8Error badge

p-badge-9Small badge

p-breadcrumb-1Breadcrumb with menu example

p-breadcrumb-2Breadcrumb with custom separator

p-breadcrumb-3Breadcrumb with home icon for home link only

p-breadcrumb-4Breadcrumb with folders icon menu

p-breadcrumb-5Breadcrumb with icons before text

p-breadcrumb-6Breadcrumb with dot separators

p-breadcrumb-7Breadcrumb with select dropdown

p-button-1Default button

p-button-10Large button

p-button-11Extra-large button

p-button-12Disabled button

p-button-13Icon button

p-button-14Small icon button

p-button-15Large icon button

p-button-16Button with icon

p-button-17Link rendered as button

p-button-18Loading button

p-button-19Expandable show more/less toggle button

p-button-2Outline button

p-button-20Back link button with chevron

p-button-21Card-style button with heading and description

p-button-22Directional pad control buttons

p-button-23Outline like button with count

p-button-24Social login icon buttons

p-button-26Star button with count badge

p-button-27Button group with QR code icon and sign in

p-button-28Button with avatar

p-button-29Pill-shaped button with rounded-full styling

p-button-3Secondary button

p-button-30Button with animated arrow on hover

p-button-31Button with keyboard shortcut indicator

p-button-32Button with notification badge

p-button-33Paired buttons (Cancel/Save)

p-button-34Button with animated status dot

p-button-35Icon-only copy button with feedback

p-button-36Copy button with feedback

p-button-37Rotating icon button (FAB-style toggle)

p-button-38Social login buttons (Google, X, GitHub)

p-button-39Hamburger menu button with animated icon

p-button-4Destructive button

p-button-40Download button with progress and cancel action

p-button-5Destructive outline button

p-button-6Ghost button

p-button-7Link button

p-button-8Extra-small button

p-button-9Small button

p-calendar-1Basic calendar

p-calendar-10Calendar with rounded range selection style

p-calendar-11Calendar with right-aligned navigation

p-calendar-12Calendar with week numbers

p-calendar-13Calendar with year-only combobox dropdown

p-calendar-14Calendar without arrow navigation (dropdown only)

p-calendar-15Calendar with current month button

p-calendar-16Calendar with today button

p-calendar-17Calendar with date input

p-calendar-18Calendar with time input

p-calendar-19Calendar with time slots (appointment picker)

p-calendar-2Calendar with custom cell size

p-calendar-20Calendar with date presets

p-calendar-21Range calendar with date presets

p-calendar-22Two months calendar

p-calendar-23Three months calendar

p-calendar-24Pricing calendar with custom day buttons

p-calendar-3Calendar with date range selection

p-calendar-4Calendar with month/year dropdown navigation

p-calendar-5Calendar with custom Select dropdown for month/year

p-calendar-6Calendar with Combobox dropdown for month/year

p-calendar-7Calendar with disabled dates

p-calendar-8Calendar with multiple date selection

p-calendar-9Calendar with rounded day buttons

p-card-1A basic card with header and footer

p-card-10Card within a frame with header and footer

p-card-11CardFrame with header action

p-card-2Authentication card with actions

p-card-3Authentication card with separators

p-card-4Framed card with footer

p-card-5Framed card with header

p-card-6Framed card with header and footer

p-card-7Framed card with no rounded bottom

p-card-8Card within a frame and footer

p-card-9Card within a frame and footer

p-checkbox-1Basic checkbox

p-checkbox-2Disabled checkbox

p-checkbox-3Checkbox with description

p-checkbox-4Card-style checkbox

p-checkbox-5Checkbox form

p-checkbox-group-1Basic checkbox group

p-checkbox-group-2Checkbox group with disabled items

p-checkbox-group-3Checkbox group with parent checkbox

p-checkbox-group-4Nested checkbox group with parent

p-checkbox-group-5Checkbox group form

p-collapsible-1Basic collapsible

p-combobox-1Basic combobox

p-combobox-10Combobox with input inside popup

p-combobox-11Combobox form

p-combobox-12Combobox multiple form

p-combobox-13Combobox with start addon

p-combobox-14Combobox multiple with start addon

p-combobox-15Pill-shaped combobox

p-combobox-16Timezone combobox

p-combobox-17Timezone combobox with search input

p-combobox-18Combobox with select trigger

p-combobox-2Disabled combobox

p-combobox-3Small combobox

p-combobox-4Large combobox

p-combobox-5Combobox with label

p-combobox-6Combobox auto highlighting the first option

p-combobox-7Combobox with clear button

p-combobox-8Combobox with grouped items

p-combobox-9Combobox with multiple selection

p-command-1Command palette with dialog

p-command-2Command palette with AI assistant

p-date-picker-1Basic date picker

p-date-picker-2Date range picker

p-date-picker-3Date picker with field and dropdown navigation

p-date-picker-4Date picker with presets

p-date-picker-5Date picker with input

p-date-picker-6Date picker that closes on select

p-date-picker-7Multiple dates picker

p-date-picker-8Date picker with select-like trigger

p-date-picker-9Two months calendar with range date

p-dialog-1Dialog with form

p-dialog-2Dialog opened from menu

p-dialog-3Nested dialogs

p-dialog-4Dialog with close confirmation

p-dialog-5Dialog with long content

p-dialog-6Dialog with bare footer

p-empty-1Empty state with icon and actions

p-field-1Field with description

p-field-10Field with textarea

p-field-11Field with select

p-field-12Field with checkbox

p-field-13Field with checkbox group

p-field-14Field with radio group

p-field-15Field with toggle switch

p-field-16Field with slider

p-field-17Field with number field

p-field-18Complete form built with field

p-field-2Field with required indicator

p-field-3Field in disabled state

p-field-4Field showing validation error

p-field-5Show field validity state

p-field-6Input group with field

p-field-7Field with autocomplete

p-field-8Field with combobox

p-field-9Field with multiple selection combobox

p-fieldset-1Fieldset with multiple fields

p-form-1Input in a form

p-form-2Form with zod validation

p-frame-1Basic frame

p-frame-2Frame with collapsible content and delete button

p-frame-3Frame with multiple separated panels

p-frame-4Frame with multiple stacked panels

p-group-1Basic group

p-group-10Nested groups

p-group-11Group with popup

p-group-12Group with input group

p-group-13Group with menu

p-group-14Group with select

p-group-15Group with search

p-group-16Group with add button and input

p-group-17Group with input and currency text

p-group-18Group with select and input

p-group-19Group with input and select

p-group-2Group with input

p-group-20Group with input and text button

p-group-22Group with two number inputs for range

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

p-group-3Small group

p-group-4Large group

p-group-5Group with disabled button

p-group-6Group with default button

p-group-7Group with start text

p-group-8Group with end text

p-group-9Vertical group

p-input-1Basic input

p-input-10Input group mimicking a URL bar

p-input-11Input group with keyboard shortcut

p-input-12Input group with start loading spinner

p-input-13Input with label and required indicator

p-input-14Input with optional label

p-input-15Input with custom border and background

p-input-16Input group with end loading spinner

p-input-17Read-only input

p-input-18Input with characters remaining counter

p-input-19Pill-shaped input

p-input-2Small input

p-input-3Large input

p-input-4Disabled input

p-input-5File input

p-input-6Input with label

p-input-7Input with button using Group

p-input-8Input with start text and end tooltip

p-input-9Password input with toggle visibility

p-input-group-1Basic input group

p-input-group-10Input group with badge

p-input-group-11Input group with keyboard shortcut

p-input-group-12Input group with inner label

p-input-group-13Small input group

p-input-group-14Large input group

p-input-group-15Disabled input group

p-input-group-16Input group with loading spinner

p-input-group-17Input group with textarea

p-input-group-18Input group with badge and menu

p-input-group-19Mini editor built with input group and toggle

p-input-group-2Input group with end icon

p-input-group-20Input group with search icon

p-input-group-21Input group with start tooltip

p-input-group-22Input group with clear button

p-input-group-23Search input group with loader and voice button

p-input-group-24Input group with character counter

p-input-group-26Password input with strength indicator

p-input-group-27Code snippet input with language selector

p-input-group-28Message composer with attachment buttons

p-input-group-29Chat input with voice and send buttons

p-input-group-3Input group with start text

p-input-group-4Input group with end text

p-input-group-5Input group with start and end text

p-input-group-6Input group with number field

p-input-group-7Input group with end tooltip

p-input-group-8Input group with icon button

p-input-group-9Input group with button

p-kbd-1Keyboard shortcuts display

p-menu-1Basic menu

p-menu-2Menu with hover

p-menu-3Menu with checkbox

p-menu-4Menu with radio group

p-menu-5Menu with link

p-menu-6Menu with group labels

p-menu-7Nested menu

p-menu-8Menu close on click

p-menu-9Menu with checkbox items as switches

p-meter-1Basic meter

p-meter-2Simple meter

p-meter-3Meter with formatted value

p-meter-4Meter with range

p-number-field-1Basic number field

p-number-field-10Number field in form

p-number-field-11Pill-shaped number field

p-number-field-2Small number field

p-number-field-3Large number field

p-number-field-4Disabled number field

p-number-field-5Number field with label

p-number-field-6Number field with scrub

p-number-field-7Number field with range

p-number-field-8Number field with formatted value

p-number-field-9Number field with step

p-pagination-1Pagination example

p-pagination-2Pagination with previous and next buttons only

p-pagination-3Pagination with select, and previous and next buttons

p-popover-1Popover with a form

p-popover-2Popover with close button

p-popover-3Animated popovers

p-preview-card-1Preview card with popup

p-progress-1Basic progress bar

p-progress-2Progress with label and value

p-progress-3Progress with formatted value

p-radio-group-1Basic radio group

p-radio-group-2Disabled radio group

p-radio-group-3Radio group with description

p-radio-group-4Radio group card

p-radio-group-5Radio group in form

p-scroll-area-1Basic scroll area

p-scroll-area-2Horizontal scroll area

p-scroll-area-3Scroll area with both directions

p-scroll-area-4Scroll area with fading edges

p-scroll-area-5Horizontal scroll area with scrollbar gutter

p-select-1Basic select

p-select-10Select with object values

p-select-11Select in form

p-select-12Select with disabled items

p-select-13Timezone select

p-select-14Status select with colored dot

p-select-15Pill-shaped select trigger

p-select-16Select with left text label

p-select-17Select with country flags

p-select-18Select with description in options only

p-select-19Select with avatars

p-select-2Small select

p-select-20Rich select with avatars and usernames

p-select-21Auto width select

p-select-22Select with custom border and background

p-select-3Large select

p-select-4Disabled select

p-select-5Select without item alignment

p-select-6Select with groups

p-select-7Multiple select

p-select-8Select with icon

p-select-9Select options with icon

p-separator-1Separator with horizontal and vertical orientations

p-sheet-1Basic sheet

p-sheet-2Sheet inset

p-sheet-3Sheet position

p-skeleton-1Basic skeleton

p-skeleton-2Skeleton only

p-slider-1Basic slider

p-slider-10Range slider with collision behavior swap

p-slider-11Slider with icons

p-slider-12Slider with input

p-slider-13Range slider with inputs

p-slider-14Slider with increment and decrement buttons

p-slider-15Price range slider

p-slider-16Emoji rating slider

p-slider-17Vertical slider

p-slider-18Vertical range slider

p-slider-19Vertical slider with input

p-slider-2Slider with label and value

p-slider-20Equalizer with vertical sliders

p-slider-21Object position sliders with reset

p-slider-22Price slider with histogram

p-slider-23Slider in form

p-slider-3Disabled slider

p-slider-4Slider with reference labels

p-slider-5Slider with ticks

p-slider-6Slider with labels above

p-slider-7Range slider

p-slider-8Slider with 3 thumbs

p-slider-9Range slider with collision behavior none

p-spinner-1Basic spinner

p-switch-1Basic switch

p-switch-2Disabled switch

p-switch-3Switch with description

p-switch-4Switch card

p-switch-5Switch in form

p-switch-6Custom size switch

p-table-1Basic table

p-table-2Framed table

p-table-3Table with TanStack Table and checkboxes

p-table-4Table with TanStack Table, sorting, and pagination

p-tabs-1Basic tabs

p-tabs-10Tabs with count badge

p-tabs-11Vertical tabs with underline and icon before name

p-tabs-12Tabs with icon only and count badge

p-tabs-13Tabs with icon only and grouped tooltips

p-tabs-2Tabs with underline

p-tabs-3Vertical tabs

p-tabs-4Vertical tabs with underline

p-tabs-5Tabs with full rounded triggers

p-tabs-6Tabs with icon before name

p-tabs-7Tabs with icon before name and underline

p-tabs-8Tabs with icon only

p-tabs-9Tabs with underline and icon on top

p-textarea-1Basic textarea

p-textarea-10Read-only textarea

p-textarea-11Textarea with characters remaining counter

p-textarea-12Textarea field with required indicator

p-textarea-13Shorter textarea with fixed height

p-textarea-14Textarea with button aligned right

p-textarea-15Textarea with button aligned left

p-textarea-2Small textarea

p-textarea-3Large textarea

p-textarea-4Disabled textarea

p-textarea-5Textarea with label

p-textarea-6Textarea in form

p-textarea-7Textarea with label and required indicator

p-textarea-8Textarea with optional label

p-textarea-9Textarea with custom border and background

p-toast-1Basic toast

p-toast-2Toast with status

p-toast-3Loading toast

p-toast-4Toast with action

p-toast-5Promise toast

p-toast-6Toast with varying heights

p-toast-7Anchored toast with tooltip style

p-toast-8Anchored toast

p-toast-9Promise toast with cancel action

p-toggle-1Basic toggle

p-toggle-2Toggle with outline

p-toggle-3Toggle with icon

p-toggle-4Small toggle

p-toggle-5Large toggle

p-toggle-6Disabled toggle

p-toggle-7Toggle icon group

p-toggle-8Bookmark toggle with tooltip and success toast

p-toggle-group-1Basic toggle group

p-toggle-group-2Small toggle group

p-toggle-group-3Large toggle group

p-toggle-group-4Toggle group with outline

p-toggle-group-5Vertical toggle group with outline

p-toggle-group-6Disabled toggle group

p-toggle-group-7Toggle group with disabled item

p-toggle-group-8Multiple selection toggle group

p-toggle-group-9Toggle group with tooltips

p-toolbar-1Toolbar with toggles, buttons, and select

p-tooltip-1Basic tooltip

p-tooltip-2Grouped tooltips

p-tooltip-3Toggle group animated tooltip

p-tooltip-4Vertical group with animated tooltip

Select a component to view its code

Click on any item in the sidebar to get started

Select a component to view its information