component usage patterns

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Progress with label and value display

Use ProgressLabel and ProgressValue components to add a label and value display to a Progress component. Example: <Progress value={56} className="w-full max-w-sm"><ProgressLabel>Upload progress</ProgressLabel><ProgressValue /></Progress>

Accordion borders styling pattern

To add borders to accordion items, add the border class to the Accordion component and add border-b last:border-b-0 classes to the AccordionItem component.

Attachment component features

The Attachment component provides: icon and image media through AttachmentMedia; upload states (idle, uploading, processing, error, done) with built-in styling and shimmer effect during progress; three sizes and horizontal or vertical orientation; a full-card AttachmentTrigger that opens a link or dialog while keeping actions independently clickable; scrollable snapping AttachmentGroup with edge fade; customizable styling through className prop on every part.

Attachment vertical orientation for images

To display an image attachment with vertical orientation, set variant='image' on AttachmentMedia, render an img element inside it, and use orientation='vertical' to stack the media above the content.

Attachment upload states behavior

The upload states are: idle, uploading, processing, error, and done. The uploading and processing states shimmer the title. The error state switches to a destructive treatment.

AttachmentTrigger with Dialog integration

To make the whole attachment card open a link or dialog, add an AttachmentTrigger. It fills the card behind the actions so the actions stay clickable. Example: wrap Attachment in Dialog, add DialogTrigger with render={<AttachmentTrigger aria-label='Preview research-summary.pdf' />}, and include DialogContent.

BreadcrumbLink render prop for custom routing

The BreadcrumbLink component accepts a `render` prop to use a custom link component from your routing library, such as `render={<a href="/" />}`.

BreadcrumbSeparator custom separator

You can customize the BreadcrumbSeparator by passing custom children to override the default separator icon.

BreadcrumbEllipsis for collapsed state

The BreadcrumbEllipsis component displays an ellipsis indicator for showing a collapsed state when the breadcrumb is too long.

Breadcrumb dropdown composition

You can compose BreadcrumbItem with a DropdownMenu component to create a dropdown in the breadcrumb.

Give your agent this brain