shadcn-preact
Components

Item

A versatile component for displaying content with media, title, description, and actions.

PreviewSource
Basic Item

A simple item with title and description.

Your profile has been verified.
Example requirements

Also uses: Button.

bun add --exact lucide-preact@1.51.0

Installation

Complete the project setup first, including Tailwind CSS v4, theme tokens, and Preact compatibility aliases.

1. Install dependencies

bun add --exact class-variance-authority@0.7.1 cn@0.4.0 preact@11.0.0 tw-animate-css@1.4.0

The usage example also needs Button. Follow their installation guides as well.

2. Copy the component with degit

Run this from your project root. It selects item.tsx, its local dependencies, and both licenses directly from the repository, then copies them into src/components/ui.

bunx degit@3.10.0 https://github.com/LiasCode/shadcn-preact#main ./.cache/shadcn-preact/item --files LICENSE.md,registry/ui/item.tsx,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/primitives/internals/empty.ts,registry/ui/primitives/internals/getReactElementRef.ts,registry/ui/primitives/internals/getStateAttributesProps.ts,registry/ui/primitives/internals/mergeObjects.ts,registry/ui/primitives/internals/resolveClassName.ts,registry/ui/primitives/internals/resolveStyle.ts,registry/ui/primitives/internals/types.ts,registry/ui/primitives/internals/useMergedRefs.ts,registry/ui/primitives/internals/useRefWithInit.ts,registry/ui/primitives/internals/useRenderElement.ts,registry/ui/primitives/merge-props/index.ts,registry/ui/primitives/separator/Separator.tsx,registry/ui/primitives/separator/index.ts,registry/ui/primitives/use-render/index.ts,registry/ui/separator.tsx --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/item/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/item/LICENSE.md ./src/components/ui/LICENSE.md

The temporary copy lives in .cache/shadcn-preact/item. Existing components stay in place; shared source files are updated from main.

Selected source files (18)

Usage

import { Button } from "./components/ui/button";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "./components/ui/item"
<Item>
  <ItemMedia variant="icon">
    <Icon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>Action</Button>
  </ItemActions>
</Item>

Examples

Variant

Use the variant prop to change the visual style of the item.

VariantSource
Preview
Example requirements
bun add --exact lucide-preact@1.51.0

Size

Use the size prop to change the size of the item. Available sizes are default, sm, and xs.

SizeSource
Preview
Example requirements
bun add --exact lucide-preact@1.51.0

Icon

Use ItemMedia with variant="icon" to display an icon.

IconSource
Preview
Example requirements

Also uses: Button.

bun add --exact lucide-preact@1.51.0

Avatar

You can use ItemMedia with variant="avatar" to display an avatar.

AvatarSource
Preview
Example requirements

Also uses: Avatar, Button.

bun add --exact lucide-preact@1.51.0

Image

Use ItemMedia with variant="image" to display an image.

ImageSource
Preview

Group

Use ItemGroup to group related items together.

GroupSource
Preview
Example requirements

Also uses: Avatar, Button.

bun add --exact lucide-preact@1.51.0

Header

Use ItemHeader to add a header above the item content.

HeaderSource
Preview

Reference

See the official Item documentation for composition patterns and API details. This page uses the Preact port and examples from the pinned upstream revision.

Component source