React Native

Item

A flexible list item with media, content, actions, and supporting text.

Item is the React Native implementation shipped by the native-item registry item. The component adapts the registry's web-facing composition to native primitives and touch-based interaction.

The native Item collection is designed for settings rows, menus, lists, and compact content blocks. It separates media, content, and actions so each part can be composed independently.

Use ItemGroup when multiple items belong to the same list and ItemSeparator when visual separation is needed.

See the shadcn/ui Item documentation for the web component API, concepts, and additional examples.

Installation

CLI

npx shadcn add https://ui.tiesen.id.vn/r/native-item.json

Manual

Copy and paste the following code into your project.

import type { VariantProps } from 'class-variance-authority'import { cva } from 'class-variance-authority'import { cn } from 'cn'import * as React from 'react'import { View } from 'react-native'import { Separator } from '@/components/native/separator'import { Typography } from '@/components/native/typography'function ItemGroup({ className, ...props }: React.ComponentProps<typeof View>) {  return (    <View      // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role      role='list'      data-slot='item-group'      className={cn(        'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',        className      )}      {...props}    />  )}function ItemSeparator({  className,  ...props}: React.ComponentProps<typeof Separator>) {  return (    <Separator      data-slot='item-separator'      orientation='horizontal'      className={cn('my-2', className)}      {...props}    />  )}const itemVariants = cva(  'group/item flex w-full flex-row flex-wrap items-center rounded-lg border 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-muted',  {    variants: {      variant: {        default: 'border-transparent',        outline: 'border-border',        muted: 'border-transparent bg-muted/50',      },      size: {        default: 'gap-2.5 px-3 py-2.5',        sm: 'gap-2.5 px-3 py-2.5',        xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',      },    },    defaultVariants: {      variant: 'default',      size: 'default',    },  })function Item({  className,  variant = 'default',  size = 'default',  ...props}: React.ComponentProps<typeof View> & VariantProps<typeof itemVariants>) {  return (    <View      data-slot='item'      data-variant={variant}      data-size={size}      className={cn(itemVariants({ variant, size, className }))}      {...props}    />  )}const itemMediaVariants = cva(  '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',  {    variants: {      variant: {        default: 'bg-transparent',        icon: "[&_svg:not([class*='size-'])]:size-4",        image:          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',      },    },    defaultVariants: {      variant: 'default',    },  })function ItemMedia({  className,  variant = 'default',  ...props}: React.ComponentProps<typeof View> & VariantProps<typeof itemMediaVariants>) {  return (    <View      data-slot='item-media'      data-variant={variant}      className={cn(itemMediaVariants({ variant, className }))}      {...props}    />  )}function ItemContent({  className,  ...props}: React.ComponentProps<typeof View>) {  return (    <View      data-slot='item-content'      className={cn(        'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',        className      )}      {...props}    />  )}function ItemTitle({  className,  ...props}: React.ComponentProps<typeof Typography>) {  return (    <Typography      data-slot='item-title'      className={cn(        'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',        className      )}      {...props}    />  )}function ItemDescription({  className,  ...props}: React.ComponentProps<typeof Typography>) {  return (    <Typography      data-slot='item-description'      className={cn(        'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',        className      )}      {...props}    />  )}function ItemActions({  className,  ...props}: React.ComponentProps<typeof View>) {  return (    <View      data-slot='item-actions'      className={cn('flex items-center gap-2', className)}      {...props}    />  )}function ItemHeader({  className,  ...props}: React.ComponentProps<typeof View>) {  return (    <View      data-slot='item-header'      className={cn(        'flex basis-full items-center justify-between gap-2',        className      )}      {...props}    />  )}function ItemFooter({  className,  ...props}: React.ComponentProps<typeof View>) {  return (    <View      data-slot='item-footer'      className={cn(        'flex basis-full items-center justify-between gap-2',        className      )}      {...props}    />  )}export {  Item,  ItemMedia,  ItemContent,  ItemActions,  ItemGroup,  ItemSeparator,  ItemTitle,  ItemDescription,  ItemHeader,  ItemFooter,}

Features

  • Default, outline, and muted item variants.
  • Default, small, and extra-small sizes.
  • Dedicated media, content, title, description, and action primitives.
  • Optional header and footer rows.
  • List grouping and separators.
  • Built on native View and the project's Typography component.

Registry dependencies: This component depends on native-separator and native-typography.

Usage

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from '@/components/native/item'
import { Button } from '@/components/native/button'

export function ItemExample() {
  return (
    <Item variant='outline'>
      <ItemMedia variant='icon'>
        <Icon />
      </ItemMedia>

      <ItemContent>
        <ItemTitle>Account settings</ItemTitle>
        <ItemDescription>
          Manage your profile and preferences.
        </ItemDescription>
      </ItemContent>

      <ItemActions>
        <Button size='sm' variant='ghost'>
          Open
        </Button>
      </ItemActions>
    </Item>
  )
}

Variants

<Item>Default</Item>
<Item variant='outline'>Outline</Item>
<Item variant='muted'>Muted</Item>

Sizes

<Item size='default'>Default</Item>
<Item size='sm'>Small</Item>
<Item size='xs'>Extra small</Item>

Media

ItemMedia supports three visual modes:

<ItemMedia>...</ItemMedia>
<ItemMedia variant='icon'>...</ItemMedia>
<ItemMedia variant='image'>
  <Image source={{ uri: avatarUrl }} />
</ItemMedia>

The image variant applies a fixed square size that becomes smaller with the item's size.

Composition

ItemGroup
└── Item
    ├── ItemHeader
    ├── ItemMedia
    ├── ItemContent
    │   ├── ItemTitle
    │   └── ItemDescription
    ├── ItemActions
    └── ItemFooter

API Reference

Item

PropTypeDefault
variant"default" | "outline" | "muted""default"
size"default" | "sm" | "xs""default"
classNamestring—
...propsReact.ComponentProps<typeof View>—

ItemMedia

PropTypeDefault
variant"default" | "icon" | "image""default"
classNamestring—
childrenReact.ReactNode—
...propsReact.ComponentProps<typeof View>—

ItemContent

PropTypeDefault
classNamestring—
childrenReact.ReactNode—
...propsReact.ComponentProps<typeof View>—

ItemTitle

PropTypeDefault
classNamestring—
childrenReact.ReactNode—
...propsReact.ComponentProps<typeof Text>—

ItemDescription

PropTypeDefault
classNamestring—
childrenReact.ReactNode—
...propsReact.ComponentProps<typeof Text>—

ItemActions

PropTypeDefault
classNamestring—
childrenReact.ReactNode—
...propsReact.ComponentProps<typeof View>—

ItemHeader

PropTypeDefault
classNamestring—
childrenReact.ReactNode—
...propsReact.ComponentProps<typeof View>—

ItemFooter

PropTypeDefault
classNamestring—
childrenReact.ReactNode—
...propsReact.ComponentProps<typeof View>—

ItemGroup

PropTypeDefault
classNamestring—
childrenReact.ReactNode—
...propsReact.ComponentProps<typeof View>—

ItemSeparator

PropTypeDefault
classNamestring—
...propsReact.ComponentProps<typeof Separator>—

Input

A styled native text input that follows the shadcn visual language.

Radio Group

A group of mutually exclusive radio options.

On this page

InstallationCLIManualFeaturesUsageVariantsSizesMediaCompositionAPI ReferenceItemItemMediaItemContentItemTitleItemDescriptionItemActionsItemHeaderItemFooterItemGroupItemSeparator