shadcnblocks

Multi-level accordion with plus/minus triggers on parent items.

Multi-level accordion with left-positioned plus/minus triggers.

Basic accordion with collapsible items and default chevron trigger.

Accordion with chevron icon positioned on the left side.

Accordion with plus/minus icons instead of chevron trigger.

Accordion with plus/minus trigger icons positioned on the left.

Accordion with icon displayed next to each item title.

Accordion with icons and plus/minus trigger icons.

Accordion with icons, subtitles, and plus/minus triggers.

Accordion items with subtitle text below each title.

Accordion with subtitles and left-positioned icons.

Accordion with subtitles and plus/minus trigger icons.

Accordion with icons, subtitles, and default chevron triggers.

Accordion styled as tabs with left-positioned plus/minus triggers.

Accordion styled as tabs with default chevron triggers.

Accordion styled as tabs with plus/minus trigger icons.

Accordion styled as tabs with left-positioned chevron triggers.

This component provides an interactive interface for managing and editing a list of addresses, allowing users to add, edit, and delete addresses with form inputs for various details like name, street, city, and phone number. It includes features such as marking an address as default, categorizing addresses by type (home, work, other), and toggling between display and edit modes.

The AddressBook2 component is designed to manage a collection of addresses, allowing users to view, edit, add, and delete addresses within a card-based layout. It provides options to define addresses as home or work, and features tools to select a default address for streamlined address management.

Narrow checkout address picker with selectable radio cards, delivery estimates, and a side sheet for adding or editing a location.

Alert dialog with confirmation message and cancel/continue actions.

Confirmation dialog with icon and warning message.

Confirmation dialog with detailed bulleted description list.

Confirmation dialog with custom-labeled action buttons.

Confirmation dialog with minimal short message.

Confirmation dialog with centered icon in colored circle.

Alert dialog with icon in action button.

Alert dialog with vertically stacked action buttons.

Alert dialog with mixed button styles in footer.

Alert dialog with file details and icon in action button.

Alert dialog with split action layout and draft button.

Destructive alert dialog for delete confirmation with red action button.

Destructive delete dialog with trash icon in header.

Destructive dialog with checkbox confirmation requirement.

Destructive dialog with highlighted consequence details list.

Destructive dialog with icon in action button.

Destructive dialog with warning badge in header.

Destructive dialog displaying item count and warning box.

Alert dialog with single text input field.

Alert dialog with multiple input fields including textarea.

Alert dialog with input and select dropdown fields.

Alert dialog with input field and helper description text.

Alert dialog with validation error state and disabled action.

Alert dialog with radio group for format selection.

Alert dialog with checkbox list for notification preferences.

Informational alert dialog displaying system update notice.

Informational dialog with info icon in header.

Informational dialog with scrollable long content.