Typography Components

ListItem

A single entry inside a List. Renders an <li> with the same typography props as Text, plus an icon prop for replacing the native marker.

Source Edit this page

A single entry inside a List. It renders an <li> and carries the same typography props as Text (appearance, size, weight, alignment), plus an icon prop for replacing the native marker. Always render it inside a List, which supplies the marker style and size.

Custom markers with the icon prop

Pass an icon node to replace the native marker on that item only. The icon wrapper matches the text line-height and scales with the list size. Mark decorative glyphs with aria-hidden="true".

Ship the feature
Write the tests
Update the docs
Plain item keeps the native marker

<List>
  <ListItem icon={<span aria-hidden="true">✓</span>}>Ship the feature</ListItem>
  <ListItem icon={<span aria-hidden="true">✓</span>}>Write the tests</ListItem>
  <ListItem icon={<span aria-hidden="true">→</span>}>Update the docs</ListItem>
  <ListItem>Plain item keeps the native marker</ListItem>
</List>

Coloring a single item

ListItem defaults to inherit, taking its color from the parent List. Set an explicit appearance on one item to override just that row while its siblings keep the inherited color.

Inherited color
Success item
Danger item
Inherited again

<List>
  <ListItem>Inherited color</ListItem>
  <ListItem success>Success item</ListItem>
  <ListItem danger>Danger item</ListItem>
  <ListItem>Inherited again</ListItem>
</List>

Emphasizing individual items

Typography toggles like bold, italic, and mono apply per item, so one entry can stand out without affecting the rest of the list.

Bold item
Italic item
monospace-item
Default item

<List>
  <ListItem bold>Bold item</ListItem>
  <ListItem italic>Italic item</ListItem>
  <ListItem mono>monospace-item</ListItem>
  <ListItem>Default item</ListItem>
</List>

Size and color inheritance

By default ListItem has inheritSize and inheritColor on, so <List xl success> propagates to every item without repeating the props. Set noInheritSize or noInheritColor (or an explicit size/appearance) on an item to opt out.

Inherits xl size and success color
Opts out: small, still inherits color
Opts out: primary color

<List xl success>
  <ListItem>Inherits xl size and success color</ListItem>
  <ListItem sm noInheritSize>Opts out: small, still inherits color</ListItem>
  <ListItem primary noInheritColor>Opts out: primary color</ListItem>
</List>

Truncating long items

Use truncate for a single clipped line, or lineClamp2 through lineClamp5 to cap an item at a fixed number of lines.

This item is clipped to one line with an ellipsis when it runs past the width.
This item is clamped to two lines, so longer content wraps once and then cuts off with an ellipsis at the end of the second line.
A short item.

<List className="w-72">
  <ListItem truncate>This item is clipped to one line with an ellipsis when it runs past the width.</ListItem>
  <ListItem lineClamp2>This item is clamped to two lines, so longer content wraps once and then cuts off with an ellipsis at the end of the second line.</ListItem>
  <ListItem>A short item.</ListItem>
</List>

ListItem Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`brand`	Appearance		Brand color appearance (blue)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inherit`	Appearance		Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`link`	Appearance		Link color appearance (blue, for hyperlinks)
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`heading`	Font Family		Heading font family (defaults to sans, independently customizable via --font-heading CSS variable)
`mono`	Font Family		Monospace font family
`sans`	Font Family	✓	Sans-serif font family (default)
`serif`	Font Family		Serif font family
`italic`	Font Style		Italic font style
`notItalic`	Font Style		Not italic (normal) font style
`black`	Font Weight		Black font weight (900)
`bold`	Font Weight		Bold font weight (700)
`extrabold`	Font Weight		Extra bold font weight (800)
`extralight`	Font Weight		Extra light font weight (200)
`light`	Font Weight		Light font weight (300)
`medium`	Font Weight		Medium font weight (500)
`normal`	Font Weight		Normal font weight (400)
`semibold`	Font Weight		Semibold font weight (600)
`thin`	Font Weight		Thin font weight (100)
`inheritColor`	Inherit Color		Inherit text color from parent via CSS variable cascade (suppresses data-appearance emission)
`noInheritColor`	Inherit Color		Keep own text color; do not inherit from parent
`inheritSize`	Inherit Size		Inherit font-size and line-height from the nearest parent typography element
`noInheritSize`	Inherit Size		Keep own font-size; do not inherit from parent
`trackingNormal`	Letter Spacing		Normal letter spacing (0)
`trackingTight`	Letter Spacing		Tight letter spacing (-0.025em)
`trackingTighter`	Letter Spacing		Tighter letter spacing (-0.05em)
`trackingWide`	Letter Spacing		Wide letter spacing (0.025em)
`trackingWider`	Letter Spacing		Wider letter spacing (0.05em)
`trackingWidest`	Letter Spacing		Widest letter spacing (0.1em)
`lg`	Size		Large size
`md`	Size		Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`textCenter`	Text Align		Align text to center
`textJustify`	Text Align		Justify text
`textLeft`	Text Align		Align text to left
`textRight`	Text Align		Align text to right
`lineThrough`	Text Decoration		Add strikethrough/line-through decoration across text
`noUnderline`	Text Decoration		Remove text decoration (no underline, strikethrough, etc.)
`overline`	Text Decoration		Add overline decoration above text
`underline`	Text Decoration		Add underline decoration below text
`capitalize`	Text Transform		Capitalize first letter of each word
`lowercase`	Text Transform		Transform text to lowercase
`normalCase`	Text Transform		Normal text case (no transformation)
`uppercase`	Text Transform		Transform text to uppercase
`lineClamp2`	Truncate		Truncate at 2 lines with ellipsis
`lineClamp3`	Truncate		Truncate at 3 lines with ellipsis
`lineClamp4`	Truncate		Truncate at 4 lines with ellipsis
`lineClamp5`	Truncate		Truncate at 5 lines with ellipsis
`noTruncate`	Truncate		Remove truncation
`truncate`	Truncate		Single line truncation with ellipsis
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant	✓	Outline variant - transparent background with border and colored text (default)

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Description
`cursorDefault`	Cursor	Default cursor - standard arrow
`cursorMove`	Cursor	Move cursor - indicates draggable element
`cursorNone`	Cursor	No cursor - hides the cursor
`cursorNotAllowed`	Cursor	Not-allowed cursor - indicates disabled state
`cursorPointer`	Cursor	Pointer cursor - indicates clickable element
`cursorText`	Cursor	Text cursor - indicates selectable text
`cursorWait`	Cursor	Wait cursor - indicates loading/processing
`block`	Display	Block display - takes full width, new line
`contents`	Display	Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display	Flex display - flexbox container
`grid`	Display	Grid display - CSS grid container
`hidden`	Display	Hidden display - element is not visible
`inline`	Display	Inline display - flows with text
`inlineBlock`	Display	Inline-block display - inline but with block properties
`inlineFlex`	Display	Inline-flex display - inline flexbox container
`inlineGrid`	Display	Inline-grid display - inline grid container
`table`	Display	Table display - behaves like table element
`tableCell`	Display	Table-cell display - behaves like td element
`hAuto`	Height	Set height to auto
`hFit`	Height	Set height to fit-content
`hFull`	Height	Set height to 100%
`hScreen`	Height	Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide	Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide	Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide	Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items	Align items to baseline
`itemsCenter`	Items	Align items to center
`itemsEnd`	Items	Align items to end (bottom/right)
`itemsStart`	Items	Align items to start (top/left)
`itemsStretch`	Items	Stretch items to fill container
`justifyAround`	Justify	Distribute items with space around them
`justifyBaseline`	Justify	Align items along their baseline on main axis
`justifyBetween`	Justify	Distribute items with space between them
`justifyCenter`	Justify	Center items along the main axis
`justifyEnd`	Justify	Pack items toward the end of the main axis
`justifyEvenly`	Justify	Distribute items with equal space around them
`justifyStart`	Justify	Pack items toward the start of the main axis
`justifyStretch`	Justify	Stretch items to fill the main axis
`overflowAuto`	Overflow	Auto overflow - show scrollbars if needed
`overflowClip`	Overflow	Clip overflow - hard clip without scrollbars
`overflowHidden`	Overflow	Hidden overflow - clip content without scrollbars
`overflowScroll`	Overflow	Scroll overflow - always show scrollbars
`overflowVisible`	Overflow	Visible overflow - content extends beyond bounds
`overflowXAuto`	Overflow	Auto overflow on X-axis only
`overflowXClip`	Overflow	Clip overflow on X-axis only
`overflowXHidden`	Overflow	Hidden overflow on X-axis only
`overflowXScroll`	Overflow	Scroll overflow on X-axis only
`overflowXVisible`	Overflow	Visible overflow on X-axis only
`overflowYAuto`	Overflow	Auto overflow on Y-axis only
`overflowYClip`	Overflow	Clip overflow on Y-axis only
`overflowYHidden`	Overflow	Hidden overflow on Y-axis only
`overflowYScroll`	Overflow	Scroll overflow on Y-axis only
`overflowYVisible`	Overflow	Visible overflow on Y-axis only
`absolute`	Position	Absolute positioning
`fixed`	Position	Fixed positioning
`relative`	Position	Relative positioning
`static`	Position	Static positioning
`sticky`	Position	Sticky positioning
`responsive`	Responsive	Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`wAuto`	Width	Set width to auto
`wFit`	Width	Set width to fit-content
`wFull`	Width	Set width to 100%
`wScreen`	Width	Set width to 100vw (viewport width), removes max-width constraint