1<script lang="ts"> 2 import Button from '../button/button.svelte'; 3 import * as Item from './index.js'; 4</script> 5 6<div class="flex w-full max-w-md flex-col gap-6"> 7 <Item.Root variant="outline"> 8 <Item.Content> 9 <Item.Title>Basic Item</Item.Title> 10 <Item.Description>A simple item with title and description.</Item.Description> 11 </Item.Content> 12 <Item.Actions> 13 <Button variant="outline" size="sm">Action</Button> 14 </Item.Actions> 15 </Item.Root> 16</div> 17

Installation

Usage

Use item for flexible content rows with title, description, media, and actions. Group rows with Item.Group and Item.Separator. Render as a link via the child snippet. Set variant and size on Item.Root.

1<script lang="ts">
2	import * as Item from '~/components/item';
3	import { Button } from '~/components/button';
4</script>
5
6<Item.Root variant="outline">
7	<Item.Content>
8		<Item.Title>Basic Item</Item.Title>
9		<Item.Description>A simple item with title and description.</Item.Description>
10	</Item.Content>
11	<Item.Actions>
12		<Button variant="outline" size="sm">Action</Button>
13	</Item.Actions>
14</Item.Root>