A simple, sizable list item.

  • StarTwinkles
  • Moon
  • Sun
  • Cloud
  • StarSubtitle
  • MoonSubtitle
  • Features

    • Accepts size prop that works on all styles.

    • Place an icon before or after.

    • Works with themes, animations, Group.


    import { ListItem } from 'tamagui'
    export default () => <ListItem>Lorem ipsum</ListItem>


    Sizing listItems provides a unique challenge especially for a compiler, because you need to adjust many different properties - not just on the outer frame, but on the text wrapped inside. Tamagui supports adjusting the padding, border radius, font size and icons sizes all in one with the size prop.

    import { ListItem } from 'tamagui'
    export default () => <ListItem size="$6">Lorem ipsum</ListItem>

    Given your theme defines a size 6, the listItem will adjust all of the properties appropriately. You can also pass a plain number to get an arbitrary size.

    Icon Theming

    You can pass icons as either elements or components. If passing components, Tamagui will automatically pass the size and color prop to them based on your theme.

    ListItem props

    ListItems extend Stack views inheriting all the Tamagui standard props, plus:


  • title


    Can use either children or title + subTitle to set the contents.

  • subTitle


    Sets a subTitle, recommended to use with title.

  • size

    string | tokens.size

    Set a size, number or one of the size token values.

  • theme


    Apply a theme just to the listItem and it's children

  • themeInverse


    Helpful for "flipping" any theme between dark and light (including flipping a sub themes defined as [subtheme]-[dark/light]

  • noTextWrap


    If true, ListItem won't wrap content with a Text element.

  • icon


    Pass any React element, appears before the text.

  • iconAfter


    Pass any React element, appears after the text.

  • scaleIcon


    Scale the icon more than usual by this number.

  • scaleSpace


    Scale the spacing more than usual by this number.

  • spaceFlex


    Makes all space elements have a flex.

  • color


    Passes "color" down to the inner text component

  • fontWeight


    Passes "fontWeight" down to the inner text component

  • letterSpacing


    Passes "letterSpacing" down to the inner text component

  • textAlign


    Passes "textAlign" down to the inner text component

  • Advanced ListItem Customization

    Tamagui <ListItem /> is a React functional component that renders multiple styled() components, not a single Tamagui styled() element itself. This means you can't wrap it with styled(ListItem) to change variants.

    We'd like to support this feature eventually , but until then we've exported a useListItem hook, alongside ListItemFrame, ListItemText, ListItemTitle, ListItemSubTitle, and listItemStaticConfig that make it simple to create your own ListItem.

    Your custom ListItem.tsx in your design system would look something like this:

    import { forwardRef } from 'React'
    import { styled, themeable, ListItemFrame, ListItemText, useListItem, listItemStaticConfig } from 'tamagui'
    const CustomListItemFrame = styled(ListItemFrame, {
    // ... customize your listItem frame base styles
    variants: {
    // ... customize your listItem frame variants
    } as const
    const ListItemComponent = forwardRef<TamaguiElement, ListItemProps>(function ListItem(props, ref) {
    const { props: listItemProps } = useListItem(
    // optionally customize the inner Text, Subtitle, Title
    { Text: ListItemText }
    return <CustomListItemFrame {...listItemProps} ref={ref} />
    // Wrapping in extractable() lets the compiler run build-time optimizations on your custom ListItem
    // Wrapping in themable means `<ListItem theme="" />` properly updates theme before useListItem needs it
    export const ListItem = ListItemFrame.extractable(themeable(ListItemComponent), listItemStaticConfig)