Primitives
Item
List row with media, content, and trailing actions.
Composition
The preferred shape for composing the installed primitive from its exported parts.
Parts
Exported compound parts from the installed source.
Item├── ItemMedia├── ItemContent├── ItemTitle├── ItemDescription├── ItemActions├── ItemHeader└── ItemFooterThe refined source installs this primitive from src/registry/sources/refined/ui/item.tsx. Install it on its own with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/item.jsonRaw code
Primary installed primitive source
Item slot
src/registry/sources/refined/ui/item.tsx
"use client";import { cva } from "class-variance-authority";import type { ComponentProps } from "react";import type { ItemProps } from "@/components/refined-ui/contracts";import { cn } from "@/components/refined-ui/lib/cn";import { useAsChildRender } from "@/components/refined-ui/lib/use-as-child-render";import { skinSlot } from "@/components/refined-ui/skin";// Refined skin slot, plain markup: horizontal list row (media+content+actions) on --radius-lg surface.// `variant`: default(bare)/outline(ring)/muted(filled). `render` renders row AS link/button for a single focus/hover target.const itemVariant = cva( "flex items-center gap-3 rounded-[var(--radius-lg)] p-3 text-sm outline-none transition duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-foreground/20 [&[href]]:cursor-pointer", { variants: { variant: { default: "", outline: "ring-1 ring-inset ring-border", muted: "bg-muted/50", }, }, defaultVariants: { variant: "default", }, },);export function Item({ variant = "default", asChild = false, render, className, children, ...props }: ItemProps) { return useAsChildRender({ defaultTagName: "div", asChild, render, children, props: { ...props, "data-ui": "agent", "data-slot": "item", "data-variant": variant, className: cn(itemVariant({ variant }), skinSlot("item", { variant }), className), }, });}// Leading media: an icon, avatar or thumbnail. Icons inherit --muted-foreground.export function ItemMedia({ className, ...props }: ComponentProps<"div">) { return ( <div data-ui="agent" data-slot="item-media" className={cn( "flex shrink-0 items-center justify-center self-start text-muted-foreground [&>svg]:size-5 [&>svg]:shrink-0", className, )} {...props} /> );}export function ItemContent({ className, ...props }: ComponentProps<"div">) { return <div data-ui="agent" data-slot="item-content" className={cn("flex min-w-0 flex-1 flex-col gap-0.5", className)} {...props} />;}export function ItemTitle({ className, ...props }: ComponentProps<"div">) { return ( <div data-ui="agent" data-slot="item-title" className={cn("flex w-fit items-center gap-2 text-sm font-medium leading-none text-foreground", className)} {...props} /> );}export function ItemDescription({ className, ...props }: ComponentProps<"p">) { return ( <p data-ui="agent" data-slot="item-description" className={cn("line-clamp-2 text-sm/relaxed text-muted-foreground", className)} {...props} /> );}// Trailing actions: buttons, a switch or a chevron. Sits at the row's end and never shrinks.export function ItemActions({ className, ...props }: ComponentProps<"div">) { return <div data-ui="agent" data-slot="item-actions" className={cn("flex shrink-0 items-center gap-1.5", className)} {...props} />;}export function ItemHeader({ className, ...props }: ComponentProps<"div">) { return ( <div data-ui="agent" data-slot="item-header" className={cn("flex basis-full items-center justify-between gap-2", className)} {...props} /> );}export function ItemFooter({ className, ...props }: ComponentProps<"div">) { return ( <div data-ui="agent" data-slot="item-footer" className={cn("flex basis-full items-center justify-between gap-2 text-meta text-muted-foreground", className)} {...props} /> );}