Item

A versatile component that you can use to display any content.

Loading... 
<div class="flex w-full max-w-md flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Content>
            <twig:Item:Title>Basic Item</twig:Item:Title>
            <twig:Item:Description>
                A simple item with title and description.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="outline" size="sm">
                Action
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>

    <twig:Item variant="outline" size="sm" as="a" href="#">
        <twig:Item:Media>
            <twig:ux:icon name="lucide:badge-check" class="size-5" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Your profile has been verified.</twig:Item:Title>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:ux:icon name="lucide:chevron-right" class="size-4" />
        </twig:Item:Actions>
    </twig:Item>
</div>

Installation

Ensure the Symfony UX Toolkit is installed in your Symfony app:

composer require --dev symfony/ux-toolkit

Then, install the recipe and its dependencies by running:

bin/console ux:install Item --kit shadcn

That's it!

Install the following Composer dependencies:

composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your Symfony app:

templates/components/Item.html.twig 
{# @prop variant 'default'|'outline'|'muted' The variant, default to `default` #}
{# @prop size 'default'|'sm' The size, default to `default` #}
{# @prop as 'div' The HTML tag to use, default to `div` #}
{# @block content The default block #}
{%- props variant = 'default', size = 'default', as = 'div' -%}
{%- set style = html_cva(
    base: 'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
    variants: {
        variant: {
            default: 'bg-transparent',
            outline: 'border-border',
            muted: 'bg-muted/50',
        },
        size: {
            default: 'p-4 gap-4',
            sm: 'py-3 px-4 gap-2.5',
        },
    },
    default_variant: {
        variant: 'default',
        size: 'default',
    },
) -%}

<{{ as }}
    data-slot="item"
    data-variant="{{ variant }}"
    data-size="{{ size }}"
    class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</{{ as }}>
templates/components/Item/Actions.html.twig 
{# @block content The default block #}
<div
    data-slot="item-actions"
    class="{{ 'flex items-center gap-2 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>
templates/components/Item/Content.html.twig 
{# @block content The default block #}
<div
    data-slot="item-content"
    class="{{ 'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>
templates/components/Item/Description.html.twig 
{# @block content The default block #}
<p
    data-slot="item-description"
    class="{{ 'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</p>
templates/components/Item/Footer.html.twig 
{# @block content The default block #}
<div
    data-slot="item-footer"
    class="{{ 'flex basis-full items-center justify-between gap-2 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>
templates/components/Item/Group.html.twig 
{# @block content The default block #}
<div
    role="list"
    data-slot="item-group"
    class="{{ 'group/item-group flex flex-col ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>
templates/components/Item/Header.html.twig 
{# @block content The default block #}
<div
    data-slot="item-header"
    class="{{ 'flex basis-full items-center justify-between gap-2 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>
templates/components/Item/Media.html.twig 
{# @prop variant 'default'|'icon'|'image' The variant, default to `default` #}
{# @block content The default block #}
{%- props variant = 'default' -%}
{%- set style = html_cva(
    base: 'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
    variants: {
        variant: {
            default: 'bg-transparent',
            icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
            image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
        },
    },
    default_variant: {
        variant: 'default',
    },
) -%}

<div
    data-slot="item-media"
    data-variant="{{ variant }}"
    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>
templates/components/Item/Separator.html.twig 
{# @prop orientation 'horizontal'|'vertical' The orientation, default to `horizontal` #}
{# @prop decorative bool Whether the separator is decorative, default to `true` #}
{# @block content The default block #}
{%- props orientation = 'horizontal', decorative = true -%}
<twig:Separator
    orientation="{{ orientation }}"
    decorative="{{ decorative }}"
    class="{{ ('my-0 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ ...attributes }}
/>
templates/components/Item/Title.html.twig 
{# @block content The default block #}
<div
    data-slot="item-title"
    class="{{ 'flex w-fit items-center gap-2 text-sm leading-snug font-medium ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>
templates/components/Separator.html.twig 
{# @prop orientation 'horizontal'|'vertical' The orientation of the separator, default to `horizontal` #}
{# @prop decorative boolean Whether the separator is decorative or not, default to `true` #}
{%- props orientation = 'horizontal', decorative = true -%}
{%- set style = html_cva(
    base: 'shrink-0 bg-border',
    variants: {
        orientation: {
            horizontal: 'h-[1px] w-full',
            vertical: 'h-full w-[1px]',
        },
    },
) -%}
<div
    class="{{ style.apply({orientation: orientation, decorative: decorative}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes.defaults({
        role: decorative ? 'none' : 'separator',
        'aria-orientation': decorative ? false : orientation,
    }) }}
></div>

Happy coding!

Usage

<div class="flex w-full max-w-md flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Content>
            <twig:Item:Title>Basic Item</twig:Item:Title>
            <twig:Item:Description>
                A simple item with title and description.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="outline" size="sm">
                Action
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>

    <twig:Item variant="outline" size="sm" as="a" href="#">
        <twig:Item:Media>
            <twig:ux:icon name="lucide:badge-check" class="size-5" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Your profile has been verified.</twig:Item:Title>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:ux:icon name="lucide:chevron-right" class="size-4" />
        </twig:Item:Actions>
    </twig:Item>
</div>

Examples

Default

Loading... 
<div class="flex w-full max-w-md flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Content>
            <twig:Item:Title>Basic Item</twig:Item:Title>
            <twig:Item:Description>
                A simple item with title and description.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="outline" size="sm">
                Action
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>

    <twig:Item variant="outline" size="sm" as="a" href="#">
        <twig:Item:Media>
            <twig:ux:icon name="lucide:badge-check" class="size-5" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Your profile has been verified.</twig:Item:Title>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:ux:icon name="lucide:chevron-right" class="size-4" />
        </twig:Item:Actions>
    </twig:Item>
</div>

Variants

Loading... 
<div class="flex flex-col gap-6">
    <twig:Item>
        <twig:Item:Content>
            <twig:Item:Title>Default Variant</twig:Item:Title>
            <twig:Item:Description>
                Standard styling with subtle background and borders.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="outline" size="sm">
                Open
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
    <twig:Item variant="outline">
        <twig:Item:Content>
            <twig:Item:Title>Outline Variant</twig:Item:Title>
            <twig:Item:Description>
                Outlined style with clear borders and transparent background.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="outline" size="sm">
                Open
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
    <twig:Item variant="muted">
        <twig:Item:Content>
            <twig:Item:Title>Muted Variant</twig:Item:Title>
            <twig:Item:Description>
                Subdued appearance with muted colors for secondary content.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="outline" size="sm">
                Open
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
</div>

Size

Loading... 
<div class="flex w-full max-w-md flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Content>
            <twig:Item:Title>Basic Item</twig:Item:Title>
            <twig:Item:Description>
                A simple item with title and description.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="outline" size="sm">
                Action
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>

    <twig:Item variant="outline" size="sm" as="a" href="#">
        <twig:Item:Media>
            <twig:ux:icon name="lucide:badge-check" class="size-5" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Your profile has been verified.</twig:Item:Title>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:ux:icon name="lucide:chevron-right" class="size-4" />
        </twig:Item:Actions>
    </twig:Item>
</div>

Icon

Loading... 
<div class="flex w-full max-w-lg flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:shield-alert" class="size-4" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Security Alert</twig:Item:Title>
            <twig:Item:Description>
                New login detected from unknown device.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button size="sm" variant="outline">
                Review
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
</div>

Avatar

Loading... 
<div class="flex w-full max-w-lg flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Media variant="icon">
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="ER" />
            </twig:Avatar>
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Evil Rabbit</twig:Item:Title>
            <twig:Item:Description>
                Last seen 5 months ago
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button size="icon-sm" variant="outline" class="rounded-full" aria-label="Invite">
                <twig:ux:icon name="lucide:plus" class="size-4" />
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>

    <twig:Item variant="outline">
        <twig:Item:Media>
          <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
            <twig:Avatar class="hidden sm:flex">
              <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
            </twig:Avatar>
            <twig:Avatar class="hidden sm:flex">
              <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
            </twig:Avatar>
            <twig:Avatar>
              <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
            </twig:Avatar>
          </div>
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>No Team Members</twig:Item:Title>
            <twig:Item:Description>
                Invite your team to collaborate on this project.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button size="sm" variant="outline">
                Invite
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
</div>

Link

Loading... 
<div class="grid w-full max-w-sm items-center gap-1.5">
    <twig:Item as="a" href="#">
        <twig:Item:Content>
            <twig:Item:Title>Visit our documentation</twig:Item:Title>
            <twig:Item:Description>
                Learn how to get started with our components.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:ux:icon name="lucide:chevron-right" class="size-4" />
        </twig:Item:Actions>
    </twig:Item>
    <twig:Item variant="outline" as="a" href="#" target="_blank" rel="noopener noreferrer">
        <twig:Item:Content>
            <twig:Item:Title>External resource</twig:Item:Title>
            <twig:Item:Description>
                Opens in a new tab with security attributes.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:ux:icon name="lucide:external-link" class="size-4" />
        </twig:Item:Actions>
    </twig:Item>
</div>

API Reference

Item

Prop Type Description
variant 'default'|'outline'|'muted' The variant, default to default
size 'default'|'sm' The size, default to default
as 'div' The HTML tag to use, default to div
Block Description
content The default block

Item:Actions

Block Description
content The default block

Item:Content

Block Description
content The default block

Item:Description

Block Description
content The default block

Item:Footer

Block Description
content The default block

Item:Group

Block Description
content The default block

Item:Header

Block Description
content The default block

Item:Media

Prop Type Description
variant 'default'|'icon'|'image' The variant, default to default
Block Description
content The default block

Item:Separator

Prop Type Description
orientation 'horizontal'|'vertical' The orientation, default to horizontal
decorative bool Whether the separator is decorative, default to true
Block Description
content The default block

Item:Title

Block Description
content The default block