Item

A versatile layout component for displaying structured content featuring media, titles, descriptions, and actions.

Instead of writing complex Flexbox or Grid classes every time you need to build a notification row, a settings item, a user listing, or a simple feature card, ItemBlock handles all the responsive alignments and spacing automatically. It dynamically transforms between horizontal rows and vertical cards based on the variant prop.

title is the only required prop — media, description and actions are slots you fill as needed.

Item

Passtitle: plus an optional description, and a media slot on the leading edge.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Item

npx shadcn@latest add @algorize-ui/item

components/custom/blocks/ItemBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Item needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Card

Setvariant"card": to stack the slots vertically and pin actions to the bottom instead of the side.

Features

Discover the Item component's structural layout features, designed for lists, dropdowns, and menus with proper spacing.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`title`	`ReactNode`	`-`	The primary title text or element displayed in the item block (required).
`description`	`ReactNode`	`undefined`	Secondary description text or content displayed below the title.
`media`	`ReactNode`	`undefined`	Visual media element such as an icon, avatar, or thumbnail.
`actions`	`ReactNode`	`undefined`	Action elements like buttons or icons placed on the trailing edge or bottom.
`variant`	`"default" \| "compact" \| "card" \| "bordered"`	`"default"`	Applies structural layout and visual styling variant.
`onClick`	`() => void`	`undefined`	Optional click event handler. Transforms the container into an interactive button.
`className`	`string`	`undefined`	Additional CSS class names to apply custom styles.