Item
Basics with action
Basics with action — see the example below.
Basic item
A short description under the title.
tsx
import { Button } from "~/components/ui/base/button";
import { Item } from "~/components/ui/base/item";
<Item.Root variant="outline">
<Item.Content>
<Item.Title>Basic item</Item.Title>
<Item.Description>A short description under the title.</Item.Description>
</Item.Content>
<Item.Actions>
<Button variant="secondary" size="sm">Action</Button>
</Item.Actions>
</Item.Root>
Variants
Variants — see the example below.
Default
No border, transparent background.
Outline
Border and a raised surface.
Muted
Secondary background from tokens.
tsx
import { Item } from "~/components/ui/base/item";
<div class="flex max-w-md flex-col gap-4">
<Item.Root>
<Item.Content>
<Item.Title>Default</Item.Title>
<Item.Description>No border, transparent background.</Item.Description>
</Item.Content>
</Item.Root>
<Item.Root variant="outline">
<Item.Content>
<Item.Title>Outline</Item.Title>
<Item.Description>Border and a raised surface.</Item.Description>
</Item.Content>
</Item.Root>
<Item.Root variant="muted">
<Item.Content>
<Item.Title>Muted</Item.Title>
<Item.Description>Secondary background from tokens.</Item.Description>
</Item.Content>
</Item.Root>
</div>
Icon and link
Icon and link — see the example below.
tsx
import { LuBadgeCheck } from "@qwikest/icons/lucide";
import { Item } from "~/components/ui/base/item";
<Item.Root variant="outline" size="sm" as="a" href="#" class="no-underline text-inherit">
<Item.Media variant="icon">
<LuBadgeCheck aria-hidden="true" />
</Item.Media>
<Item.Content>
<Item.Title>Profile verified</Item.Title>
</Item.Content>
<Item.Actions>
<span class="text-tertiary-label" aria-hidden="true">›</span>
</Item.Actions>
</Item.Root>
Avatar and group
Avatar and group — see the example below.
First
Second
tsx
import { Item } from "~/components/ui/base/item";
<Item.Group class="max-w-md">
<Item.Root variant="outline">
<Item.Content><Item.Title>First</Item.Title></Item.Content>
</Item.Root>
<Item.Separator />
<Item.Root variant="outline">
<Item.Content><Item.Title>Second</Item.Title></Item.Content>
</Item.Root>
</Item.Group>
Metadata
Source: meta.generated.json (see npm run generate)
File base/item/meta.generated.json not found or path not allowed.