Item Inset Separator
A divider under an Item that starts at its content, past the media, placed with CSS anchor positioning
2.4 MB
5.1 MB
3.8 MB
Installation
pnpm dlx shadcn@latest add @alexandrejoly/item-inset-separatorUsage
import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle,} from "@/components/ui/item";import { ItemInsetSeparator } from "@/components/ui/item-inset-separator";<div className="flex flex-col"> {projects.map((project, index) => ( <Item key={project.id}> <ItemMedia variant="icon"> <FolderIcon /> </ItemMedia> <ItemContent> <ItemTitle>{project.name}</ItemTitle> <ItemDescription>{project.description}</ItemDescription> </ItemContent> {index < projects.length - 1 && <ItemInsetSeparator />} </Item> ))}</div>Examples
Inset past the media
Each line starts at its own row’s text: past an image, past an icon, or at the edge with no media.
Started a thread in #design
12 new messages
Sent every Monday at 9:00
Accessibility
Each line has the separator role, so a screen reader announces one inside every row. The rows already part the content: pass aria-hidden to keep the line visual only.
API reference
ItemInsetSeparator
Placed inside an Item, a line along its bottom from where ItemContent starts, so it follows each row’s media, or the row’s edge without one. Render it in every row but the last, and stack the rows without a gap, in a plain flex column rather than an ItemGroup, so each line sits midway between two rows. A plain class replaces its position or margins; its start and width need an important class, such as start-4! or w-1/2!.
Takes every prop of shadcn ItemSeparator (opens in a new tab).