V2 componentsUpdated Oct 14, 2026

Item

A settings row: what it is, what it means, and the one control that changes it. Use it for any title + description + trailing control, stacked in an Item.Group with hairlines between. Not a Cell, which is a raised card you press, and not a Field, which wires a label to an input: when the control is an input use a justified Field, which shares Item’s type and sits in the same group.

Import

Source: packages/ui/src/components/item

tsx

1import { Item, itemVariants, itemTitleClasses, itemDescriptionVariants } from '@highlight/ui'

Playground

Change the props; the preview and the snippet update together.

Export dataCopy this workspace’s data to files or to another workspace.

Props

Variant

Size

Media

Title

Description

Description as error

Action

Disabled

tsx

1<Item>2  <Item.Content>3    <Item.Title>Export data</Item.Title>4    <Item.Description>5      Copy this workspace’s data to files or to another workspace.6    </Item.Description>7  </Item.Content>8  <Item.Actions><Button variant="secondary" size="sm">Export</Button></Item.Actions>9</Item>

Anatomy

Content fills; Actions sizes to itself at the far end. The title truncates, the description clamps to two lines.

Export dataCopy this workspace’s data to files or to another workspace.

tsx

1import { Button, Item } from '@highlight/ui'2 3export default function ItemBasic() {4  return (5    <Item className="max-w-xl">6      <Item.Content>7        <Item.Title>Export data</Item.Title>8        <Item.Description>Copy this workspace’s data to files or to another workspace.</Item.Description>9      </Item.Content>10      <Item.Actions>11        <Button variant="secondary" size="sm">12          Export13        </Button>14      </Item.Actions>15    </Item>16  )17}

Group

Item.Group draws the hairline between rows and sets their density. Items pad themselves; a justified Field in the same group takes the group’s padding so it lines up.

Single sign-onMembers sign in through your identity provider.

Directory syncPeople removed from your identity provider are removed from this workspace.

tsx

1import { ExternalLink } from 'lucide-react'2import { Button, Item } from '@highlight/ui'3 4export default function ItemGroup() {5  return (6    <Item.Group className="max-w-xl">7      <Item>8        <Item.Content>9          <Item.Title>Single sign-on</Item.Title>10          <Item.Description>Members sign in through your identity provider.</Item.Description>11        </Item.Content>12        <Item.Actions>13          <Button variant="secondary" size="sm" right={<ExternalLink />}>14            Configure15          </Button>16        </Item.Actions>17      </Item>18      <Item>19        <Item.Content>20          <Item.Title>Directory sync</Item.Title>21          <Item.Description>22            People removed from your identity provider are removed from this workspace.23          </Item.Description>24        </Item.Content>25        <Item.Actions>26          <Button variant="secondary" size="sm" right={<ExternalLink />}>27            Set up28          </Button>29        </Item.Actions>30      </Item>31    </Item.Group>32  )33}

Without separators

separator={false} drops the hairlines. For a list the eye already parses row by row, such as one with media tiles, the lines are noise. Pair it with size="sm" for a denser list.

Weekly syncRecorded 42 min ago

Design review notesEdited yesterday

Q4 planningTomorrow, 10:00

tsx

1import { Calendar, FileText, Mic } from 'lucide-react'2import { Button, Item } from '@highlight/ui'3 4export default function ItemNoSeparator() {5  return (6    <Item.Group separator={false} size="sm" className="max-w-xl">7      <Item>8        <Item.Media variant="icon">9          <Mic />10        </Item.Media>11        <Item.Content>12          <Item.Title>Weekly sync</Item.Title>13          <Item.Description>Recorded 42 min ago</Item.Description>14        </Item.Content>15        <Item.Actions>16          <Button variant="ghost" size="sm">17            Open18          </Button>19        </Item.Actions>20      </Item>21      <Item>22        <Item.Media variant="icon">23          <FileText />24        </Item.Media>25        <Item.Content>26          <Item.Title>Design review notes</Item.Title>27          <Item.Description>Edited yesterday</Item.Description>28        </Item.Content>29        <Item.Actions>30          <Button variant="ghost" size="sm">31            Open32          </Button>33        </Item.Actions>34      </Item>35      <Item>36        <Item.Media variant="icon">37          <Calendar />38        </Item.Media>39        <Item.Content>40          <Item.Title>Q4 planning</Item.Title>41          <Item.Description>Tomorrow, 10:00</Item.Description>42        </Item.Content>43        <Item.Actions>44          <Button variant="ghost" size="sm">45            Open46          </Button>47        </Item.Actions>48      </Item>49    </Item.Group>50  )51}

Media

image is a bordered tile for a brand mark, icon a quiet tile for a lucide glyph, avatar a circle for a person. Media is aria-hidden: the title names the row.

Google WorkspaceApprove Highlight for your whole company.

AshbyOne API key signs in every member.

Maya ChenAdmin

tsx

1import { Building2, Plus } from 'lucide-react'2import { Button, Item } from '@highlight/ui'3 4export default function ItemMedia() {5  return (6    <Item.Group className="max-w-xl">7      <Item>8        <Item.Media variant="image">9          <Building2 />10        </Item.Media>11        <Item.Content>12          <Item.Title>Google Workspace</Item.Title>13          <Item.Description>Approve Highlight for your whole company.</Item.Description>14        </Item.Content>15        <Item.Actions>16          <Button variant="outline" shape="square" aria-label="Connect Google Workspace">17            <Plus />18          </Button>19        </Item.Actions>20      </Item>21      <Item>22        <Item.Media variant="icon">23          <Building2 />24        </Item.Media>25        <Item.Content>26          <Item.Title>Ashby</Item.Title>27          <Item.Description>One API key signs in every member.</Item.Description>28        </Item.Content>29        <Item.Actions>30          <Button variant="outline" shape="square" aria-label="Connect Ashby">31            <Plus />32          </Button>33        </Item.Actions>34      </Item>35      <Item>36        <Item.Media variant="avatar">37          <img alt="" src="https://i.pravatar.cc/64?img=12" />38        </Item.Media>39        <Item.Content>40          <Item.Title>Maya Chen</Item.Title>41          <Item.Description>Admin</Item.Description>42        </Item.Content>43      </Item>44    </Item.Group>45  )46}

Interactive rows

render swaps the element. An anchor or a button makes the whole row the target. The hover wash sits behind the row and bleeds past its edges, so the group’s hairlines stay straight.

MembersWho is in this workspace and what they can do.

tsx

1import { ChevronRight } from 'lucide-react'2import { Item } from '@highlight/ui'3 4export default function ItemLink() {5  return (6    <Item.Group className="max-w-xl">7      <Item render={<a href="#members" />}>8        <Item.Content>9          <Item.Title>Members</Item.Title>10          <Item.Description>Who is in this workspace and what they can do.</Item.Description>11        </Item.Content>12        <Item.Actions>13          <ChevronRight className="text-foreground-secondary size-4" />14        </Item.Actions>15      </Item>16      <Item render={<button type="button" onClick={() => alert('Pressed')} />}>17        <Item.Content>18          <Item.Title>Billing</Item.Title>19          <Item.Description>Plan, seats and invoices.</Item.Description>20        </Item.Content>21        <Item.Actions>22          <ChevronRight className="text-foreground-secondary size-4" />23        </Item.Actions>24      </Item>25    </Item.Group>26  )27}

With a Field

A justified Field in the same group. Field.Label and Field.Note are built from Item’s title and description styles, so the two rows read as one list.

LogoSquare PNG or SVG, at least 256 × 256 px.

Workspace name

Shown to members at sign-in.

tsx

1import { Button, Field, Input, Item } from '@highlight/ui'2 3export default function ItemWithField() {4  return (5    <Item.Group className="max-w-xl">6      <Item>7        <Item.Content>8          <Item.Title>Logo</Item.Title>9          <Item.Description>Square PNG or SVG, at least 256 × 256 px.</Item.Description>10        </Item.Content>11        <Item.Actions>12          <Button variant="secondary" size="sm">13            Upload14          </Button>15        </Item.Actions>16      </Item>17      <Field orientation="justified">18        <Field.Label>Workspace name</Field.Label>19        <Field.Note>Shown to members at sign-in.</Field.Note>20        <Input defaultValue="Maya’s workspace" className="w-60" />21      </Field>22    </Item.Group>23  )24}

Disabled and error

disabled greys the text and leaves the control to carry its own disabled. Description tone="danger" is the error in place of the explanation, announced, with no layout shift.

Leave Maya’s workspaceYou’re the only one here. Deactivate it instead.

Deactivate Maya’s workspaceEveryone loses access. Data is deleted after 30 days.

Google WorkspaceNot verifiedFinish authorizing Highlight in the Google Admin console.

tsx

1import { Badge, Button, Item } from '@highlight/ui'2 3export default function ItemStates() {4  return (5    <Item.Group className="max-w-xl">6      <Item disabled>7        <Item.Content>8          <Item.Title>Leave Maya’s workspace</Item.Title>9          <Item.Description>You’re the only one here. Deactivate it instead.</Item.Description>10        </Item.Content>11        <Item.Actions>12          <Button variant="secondary" tone="danger" size="sm" disabled>13            Leave workspace14          </Button>15        </Item.Actions>16      </Item>17      <Item>18        <Item.Content>19          <Item.Title>Deactivate Maya’s workspace</Item.Title>20          <Item.Description>Everyone loses access. Data is deleted after 30 days.</Item.Description>21        </Item.Content>22        <Item.Actions>23          <Button variant="secondary" tone="danger" size="sm">24            Deactivate25          </Button>26        </Item.Actions>27      </Item>28      <Item>29        <Item.Content>30          <Item.Title badge={<Badge tone="danger">Not verified</Badge>}>Google Workspace</Item.Title>31          <Item.Description tone="danger">Finish authorizing Highlight in the Google Admin console.</Item.Description>32        </Item.Content>33        <Item.Actions>34          <Button variant="secondary" size="sm">35            Verify36          </Button>37        </Item.Actions>38      </Item>39    </Item.Group>40  )41}

Variants and sizes

default is flat for lists. outline and muted give a lone row its own edge or wash.

OutlineIts own edge, for a row that stands alone.

MutedA quiet wash, for a row that is informational.

SmallTighter padding for dense lists.

tsx

1import { Button, Item } from '@highlight/ui'2 3export default function ItemVariants() {4  return (5    <div className="flex max-w-xl flex-col gap-4">6      <Item variant="outline">7        <Item.Content>8          <Item.Title>Outline</Item.Title>9          <Item.Description>Its own edge, for a row that stands alone.</Item.Description>10        </Item.Content>11        <Item.Actions>12          <Button variant="ghost" size="sm">13            Action14          </Button>15        </Item.Actions>16      </Item>17      <Item variant="muted">18        <Item.Content>19          <Item.Title>Muted</Item.Title>20          <Item.Description>A quiet wash, for a row that is informational.</Item.Description>21        </Item.Content>22      </Item>23      <Item size="sm" variant="outline">24        <Item.Content>25          <Item.Title>Small</Item.Title>26          <Item.Description>Tighter padding for dense lists.</Item.Description>27        </Item.Content>28      </Item>29    </div>30  )31}

Parts

The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.

Item: A div holding one row: Item.Content beside Item.Actions. variant and size set its look.
Item.Group: Stacks rows with a hairline between each; accepts Items and justified Fields. size sets the density of every Item in it; separator={false} drops the hairlines.
Item.Media: Leading tile. variant: icon | image | avatar.
Item.Content: The elastic middle holding Title and Description.
Item.Title: One line, truncates. badge puts a Badge after the text.
Item.Description: Two lines, clamped. tone="danger" turns it into the announced error.
Item.Actions: Trailing controls, sized to themselves.

Props

Props added on top of the underlying element or Base UI part.

Prop	Type	Default	Description
`variant`	'default'\|'outline'\|'muted'	'default'	default is flat, for rows in a group. outline draws a border, muted a subtle wash, for a row on its own.
`size`	'md'\|'sm'	'md'	Vertical padding and gap: 12 / 8. Inherits from a surrounding Item.Group when omitted.
`align`	'center'\|'start'	'center'	start pins media and actions to the first line when the description runs long beside a tall control.
`render`	ReactElement	—	The element to render as, e.g. <a href> or <button>. A rendered row is interactive: hover wash and focus ring.
`disabled`	boolean	false	Greys the title and description.

Notes

itemTitleClasses and itemDescriptionVariants are the type Field.Label and Field.Note are built from. Import them for a one-off row rather than restating the classes.
Media is aria-hidden by default. Pass aria-hidden={false} and an aria-label when the picture carries something the title does not.