Components / Item

Item

A flexible list row: media on the left, a title and description in the middle, and actions on the right. Pure Tailwind, composed from slots.

Examples

Your weekly digest

A round-up of everything that happened this week.

razor

<ZitsItem Variant="outline">
    <ZitsItemMedia Variant="icon"><MailIcon /></ZitsItemMedia>
    <ZitsItemContent>
        <ZitsItemTitle>Your weekly digest</ZitsItemTitle>
        <ZitsItemDescription>A round-up of everything that happened this week.</ZitsItemDescription>
    </ZitsItemContent>
    <ZitsItemActions>
        <ZitsButton Variant="outline" Size="sm">View</ZitsButton>
    </ZitsItemActions>
</ZitsItem>

Variants

Set Variant to default, outline, or muted.

Default

Transparent border, no fill.

Outline

A visible border around the row.

Muted

A subtle muted background.

razor

<ZitsItem>...</ZitsItem>
<ZitsItem Variant="outline">...</ZitsItem>
<ZitsItem Variant="muted">...</ZitsItem>

Sizes

Use Size="sm" for a more compact row.

Small

Default

razor

<ZitsItem Variant="outline" Size="sm">...</ZitsItem>
<ZitsItem Variant="outline">...</ZitsItem>

Group

Stack rows in an ZitsItemGroup, separated by ZitsItemSeparator.

Profile

Manage your public profile.

Billing

Update your payment method.

razor

<ZitsItemGroup>
    <ZitsItem>
        <ZitsItemContent>
            <ZitsItemTitle>Profile</ZitsItemTitle>
            <ZitsItemDescription>Manage your public profile.</ZitsItemDescription>
        </ZitsItemContent>
        <ZitsItemActions><ZitsButton Variant="ghost" Size="sm">Edit</ZitsButton></ZitsItemActions>
    </ZitsItem>
    <ZitsItemSeparator />
    <ZitsItem>...</ZitsItem>
</ZitsItemGroup>

Installation

Terminal bash

navius add item

Parts

Compose the item from these slots; each forwards its class.

Prop	Type	Default
ZitsItem	row	flex container, Variant + Size
ZitsItemGroup	list	stacks rows in a column
ZitsItemMedia	slot	leading icon / image, Variant
ZitsItemContent	slot	title + description column
ZitsItemTitle	slot	row title
ZitsItemDescription	slot	<p> muted, line-clamped
ZitsItemActions	slot	trailing actions
ZitsItemHeader	slot	full-width header above the row
ZitsItemFooter	slot	full-width footer below the row
ZitsItemSeparator	slot	horizontal separator between rows

API reference

Prop	Type	Default
Variant	string (ZitsItem)	"default" · outline · muted
Size	string (ZitsItem)	"default" · sm
Variant	string (ZitsItemMedia)	"default" · icon · image
ChildContent	RenderFragment	-