
List rows stacked flush inside one bordered panel with divide lines between entries.
@shadcnblocks
example/list-panel/list-stacked.tsx
import { Item, ItemContent, ItemGroup, ItemTitle } from "@/components/ui/item";
export const title = "Stacked";
const modules = ["Billing exports", "Inventory sync", "Report scheduler"];
const Example = () => (
<div className="w-full max-w-md overflow-hidden rounded-md border bg-background">
<ItemGroup className="gap-0 divide-y">
{modules.map((name) => (
<Item className="rounded-none border-0 shadow-none" key={name}>
<ItemContent>
<ItemTitle>{name}</ItemTitle>
</ItemContent>
</Item>
))}
</ItemGroup>
</div>
);
export default Example;






























