DocsComponentsItem

Item

A row of content: media, title, description and actions.

8 files

<div class="grid w-full max-w-md gap-4">
  <pb-ui.item variant="outline">
    <pb-ui.item-content>
      <pb-ui.item-title>Two-factor authentication</pb-ui.item-title>
      <pb-ui.item-description>Verify your identity by email or phone.</pb-ui.item-description>
    </pb-ui.item-content>
    <pb-ui.item-actions><pb-ui.button size="sm" variant="outline">Enable</pb-ui.button></pb-ui.item-actions>
  </pb-ui.item>
  <pb-ui.item variant="muted" size="sm">
    <pb-ui.item-media variant="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg></pb-ui.item-media>
    <pb-ui.item-content><pb-ui.item-title>Your profile has been verified.</pb-ui.item-title></pb-ui.item-content>
  </pb-ui.item>
</div>

Installation

pyblade-ui add item

Copy these files into your project

components/ui/item.html

@props({'variant': 'default', 'size': 'default'})
<div data-slot="item" data-variant="{{ variant }}" data-size="{{ size }}" {{ attributes.cn(
    "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50",
    {'default': 'bg-transparent', 'outline': 'border-border', 'muted': 'bg-muted/50'}[variant],
    {'default': 'gap-4 p-4', 'sm': 'gap-2.5 px-4 py-3'}[size],
) }}>{{ slot }}</div>

components/ui/item_group.html

<div role="list" data-slot="item-group" {{ attributes.cn("group/item-group flex flex-col") }}>{{ slot }}</div>

components/ui/item_separator.html

<div role="separator" data-slot="item-separator" {{ attributes.cn("my-0 h-px w-full shrink-0 bg-border") }}></div>

components/ui/item_media.html

@props({'variant': 'default'})
<div data-slot="item-media" data-variant="{{ variant }}" {{ attributes.cn(
    "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
    {
        'default': 'bg-transparent',
        'icon': "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
        'image': 'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover',
    }[variant],
) }}>{{ slot }}</div>

components/ui/item_content.html

<div data-slot="item-content" {{ attributes.cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none") }}>{{ slot }}</div>

components/ui/item_title.html

<div data-slot="item-title" {{ attributes.cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium") }}>{{ slot }}</div>

components/ui/item_description.html

<p data-slot="item-description" {{ attributes.cn("line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary") }}>{{ slot }}</p>

components/ui/item_actions.html

<div data-slot="item-actions" {{ attributes.cn("flex items-center gap-2") }}>{{ slot }}</div>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <pb-ui.item> <pb-ui.item-group> <pb-ui.item-separator> <pb-ui.item-media> <pb-ui.item-content> <pb-ui.item-title> <pb-ui.item-description> <pb-ui.item-actions> are available in all your templates.

<pb-ui.item variant="outline">
  <pb-ui.item-content>
    <pb-ui.item-title>Two-factor authentication</pb-ui.item-title>
    <pb-ui.item-description>Verify via email or phone number.</pb-ui.item-description>
  </pb-ui.item-content>
  <pb-ui.item-actions><pb-ui.button size="sm">Enable</pb-ui.button></pb-ui.item-actions>
</pb-ui.item>

Examples

List

<pb-ui.item-group class="w-full max-w-md divide-y rounded-lg border">
  @for(p in people)
  <pb-ui.item>
    <pb-ui.item-media><pb-ui.avatar :fallback="p.initials" class="size-10" /></pb-ui.item-media>
    <pb-ui.item-content>
      <pb-ui.item-title>{{ p.name }}</pb-ui.item-title>
      <pb-ui.item-description>{{ p.email }}</pb-ui.item-description>
    </pb-ui.item-content>
    <pb-ui.item-actions><pb-ui.button variant="ghost" size="sm">Invite</pb-ui.button></pb-ui.item-actions>
  </pb-ui.item>
  @endfor
</pb-ui.item-group>

Props

<pb-ui.item>

Prop	Default
variant	'default'
size	'default'

<pb-ui.item-media>

Prop	Default
variant	'default'

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Card Badge ›