Attachment component features
Attachment renders files and images with media, metadata, upload state, actions, and a full-card trigger that keeps actions separately clickable.
component usage
45 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Marker component features
Marker renders status updates, system notes, bordered rows, and labeled separators for things like streaming state, tool activity, and date breaks.
MessageScroller component purpose
MessageScroller is the scroll container for a conversation. It handles anchored turns, streamed replies, saved thread restore, prepended history, jump-to-message, scroll controls, and visibility tracking. It owns behavior without owning messages, AI state, transport, persistence, or model state.
Message component layout
Message lays out a row in the conversation with avatar, alignment, header, content, footer, and grouped messages.
Bubble component features
Bubble renders the message surface with variants, alignment, reactions, links, buttons, and collapsible content.
Listen to carousel events
Use the api instance from setApi to listen to events. Subscribe using api.on('select', () => { /* handler */ }) for selection change events. See Embla Carousel docs for all available events.
Scroll Area basic usage example
The Scroll Area component wraps content and accepts className for styling. Example: <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">Your scrollable content here.</ScrollArea>
Scroll Area import statement
Import Scroll Area using: import { ScrollArea } from "@/components/ui/scroll-area"
Scroll Area purpose
Scroll Area augments native scroll functionality for custom, cross-browser styling.
Scroll Area supports horizontal scrolling
Scroll Area can be configured for horizontal scrolling in addition to vertical scrolling.
Typography component not shipped by default
shadcn/ui does not ship any typography styles by default. Typography styling is achieved through utility classes.
Carousel responsive spacing example
```tsx <Carousel> <CarouselContent className="-ml-2 md:-ml-4"> <CarouselItem className="pl-2 md:pl-4">...</CarouselItem> <CarouselItem className="pl-2 md:pl-4">...</CarouselItem> <CarouselItem className="pl-2 md:pl-4">...</CarouselItem> </CarouselContent> </Carousel> ```
Carousel opts example
```tsx <Carousel opts={{ align: "start", loop: true, }} > <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> </Carousel> ```
Carousel basic usage example
```tsx <Carousel> <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> <CarouselPrevious /> <CarouselNext /> </Carousel> ```
Set carousel item size with basis utility
Use the `basis` utility class on CarouselItem to set the size of carousel items. For example, `className="basis-1/3"` makes items 33% of the carousel width.
Carousel responsive sizing example
```tsx <Carousel> <CarouselContent> <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem> <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem> <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem> </CarouselContent> </Carousel> ``` This example shows 50% width on small screens and 33% on larger screens.
Set carousel item spacing
To set spacing between carousel items, use a `pl-[VALUE]` utility class on CarouselItem and a negative `-ml-[VALUE]` on CarouselContent.
Carousel spacing example
```tsx <Carousel> <CarouselContent className="-ml-4"> <CarouselItem className="pl-4">...</CarouselItem> <CarouselItem className="pl-4">...</CarouselItem> <CarouselItem className="pl-4">...</CarouselItem> </CarouselContent> </Carousel> ```
Carousel orientation example
```tsx <Carousel orientation="vertical | horizontal"> <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> </Carousel> ```
Carousel component imports
Import Carousel, CarouselContent, CarouselItem, CarouselNext, and CarouselPrevious from @/components/ui/carousel.
Alert Dialog description
Alert Dialog is a modal dialog that interrupts the user with important content and expects a response.
Alert Dialog basic usage example
Example of Alert Dialog usage: ```tsx import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" <AlertDialog> <AlertDialogTrigger render={<Button variant="outline" />}> Show Dialog </AlertDialogTrigger> <AlertDialogContent> <AlertDialogHeader> <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> <AlertDialogDescription> This action cannot be undone. This will permanently delete your account from our servers. </AlertDialogDescription> </AlertDialogHeader> <AlertDialogFooter> <AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogAction>Continue</AlertDialogAction> </AlertDialogFooter> </AlertDialogContent> </AlertDialog> ```
Alert Dialog AlertDialogMedia component
Use the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog header.
Alert Dialog component imports
The Alert Dialog component exports: AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, and AlertDialogTrigger. These are imported from @/components/ui/alert-dialog.
Alert component basic usage example
Example usage of Alert component: <Alert><InfoIcon /><AlertTitle>Heads up!</AlertTitle><AlertDescription>You can add components and dependencies to your app using the cli.</AlertDescription><AlertAction><Button variant="outline">Enable</Button></AlertAction></Alert>
Alert component imports
Import Alert, AlertAction, AlertDescription, and AlertTitle from @/components/ui/alert.
ButtonGroupText display text in button group
The ButtonGroupText component displays text within a button group.
ButtonGroup basic usage example
A basic ButtonGroup contains multiple Button components wrapped in a ButtonGroup container: ```tsx <ButtonGroup> <Button>Button 1</Button> <Button>Button 2</Button> </ButtonGroup> ```
ButtonGroup vs ToggleGroup distinction
Use ButtonGroup when you want to group buttons that perform an action. Use ToggleGroup when you want to group buttons that toggle a state.
ButtonGroupSeparator visual divider
The ButtonGroupSeparator component visually divides buttons within a group. Buttons with variant `outline` do not need a separator since they have a border. For other variants, a separator is recommended to improve visual hierarchy.
ButtonGroupSeparator basic usage
Create a split button group by adding two buttons separated by a ButtonGroupSeparator: ```tsx <ButtonGroup> <Button>Button 1</Button> <ButtonGroupSeparator /> <Button>Button 2</Button> </ButtonGroup> ```
ButtonGroup import paths
Import ButtonGroup, ButtonGroupSeparator, and ButtonGroupText from `@/components/ui/button-group`.
ButtonGroupText basic usage
Display text within a button group: ```tsx <ButtonGroup> <ButtonGroupText>Text</ButtonGroupText> <Button>Button</Button> </ButtonGroup> ```
ButtonGroupText with custom render prop
Use the `render` prop to render a custom component as the text in a ButtonGroupText: ```tsx import { ButtonGroupText } from "@/components/ui/button-group" import { Label } from "@/components/ui/label" export function ButtonGroupTextDemo() { return ( <ButtonGroup> <ButtonGroupText render={<Label htmlFor="name" />}>Text</ButtonGroupText> <Input placeholder="Type something here..." id="name" /> </ButtonGroup> ) } ```
Button component import
Import the Button component from @/components/ui/button
Button basic usage
The basic usage of the Button component is: <Button variant="outline">Button</Button>
Button icon attribute spacing
When adding an icon to a button, add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon element for correct spacing.
Button spinner loading state
To show a loading state in a button, render a <Spinner /> component inside the button. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner for correct spacing.
Button rounded style
To make a button rounded, use the rounded-full CSS class on the button.
ButtonGroup component
To create a button group, use the ButtonGroup component. See the Button Group documentation for more details.
Button as link using buttonVariants
Use the buttonVariants helper to make a link look like a button. Do not use <Button render={<a />} nativeButton={false} /> for links because the Base UI Button component always applies role="button", which overrides the semantic link role on <a> elements. Use buttonVariants with a plain <a> tag instead.
Button cursor behavior in Tailwind v4
Tailwind v4 switched from cursor: pointer to cursor: default for the button component. To keep the cursor: pointer behavior, add the following code to your CSS file: @layer base { button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; } }. You can also enable this during project setup with npx shadcn@latest init --pointer.
Checkbox import statement
Import the Checkbox component using: import { Checkbox } from "@/components/ui/checkbox"
Checkbox basic usage
The simplest usage of the Checkbox component is: <Checkbox />
Checkbox controlled state example
import * as React from "react" export function Example() { const [checked, setChecked] = React.useState(false) return <Checkbox checked={checked} onCheckedChange={setChecked} /> }