Data display

Icons, badges, avatars, tags, keyboard keys and ratings.

5 components · 15 variants

Switch category

Avatar

People as image or initials, with presence, in stacks and with a name.

Sizes and kinds
Group
Presence list
Profile card

Props and details

Sizes and kinds

Six sizes for image, initials, square and status.

Installv1.0.0

aiw add @ai-website/avatar

Brings along utils, kit

Usage

<Avatar name="Lena Hoffmann" src="/lena.jpg" size="lg" status="online" />

Source

Group

Overlapping stacks with a counter, in a project card and three sizes.

Installv1.0.0

aiw add @ai-website/avatar

Brings along utils, kit

Usage

<AvatarGroup people={team} max={4} size="md" label="Project team" />

Source

Presence list

Avatar with name, role and status in a team list.

Installv1.0.0

aiw add @ai-website/avatar

Brings along utils, kit

Usage

<AvatarLabel name="Amira Said" description="Customer success" status="busy" />

Source

Profile card

A large avatar over a cover image, with actions and three numbers.

Installv1.0.0

aiw add @ai-website/avatar

Brings along utils, kit

Usage

<Avatar name="Lena Hoffmann" src="/lena.jpg" size="2xl" ring status="online" />

Source

icon

Icons

The kit’s own line icons in 18 groups, drawn on a 24 pixel grid.

All icons
Sizes and weights
Containers

Props and details

All icons

Searchable by name and group, a click copies the code.

Installv1.0.1

aiw add @ai-website/icon

Brings along utils

Usage

<Icon name="coffee" size={20} />

Source

Sizes and weights

From 16 to 32 pixels, three stroke weights and the icons inside buttons, fields and lists.

Installv1.0.1

aiw add @ai-website/icon

Brings along utils

Usage

<Icon name="heart" size={24} strokeWidth={2} label="Saved" />

Source

Containers

Six calm ways to set an icon above a feature, all from tokens.

Installv1.0.1

aiw add @ai-website/icon

Brings along utils

Usage

<span className="grid size-11 place-items-center rounded-lg bg-[color-mix(in_oklab,var(--primary)_12%,transparent)] text-primary"><Icon name="calendar-check" /></span>

Source

kbd

Keyboard keys

Key caps and shortcuts that show Command on Apple devices and Ctrl elsewhere, and press down with the real key.

In text and menus
Cheat sheet
Sizes and styles

Props and details

In text and menus

Keys inside sentences and as hints in a command menu.

Installv1.0.0

aiw add @ai-website/kbd

Brings along utils, kit, icon

Usage

<Shortcut keys={["mod", "k"]} />

Source

Cheat sheet

All shortcuts in three groups, as a definition list.

Installv1.0.0

aiw add @ai-website/kbd

Brings along utils, kit, icon

Usage

<Shortcut keys={["g", "d"]} mode="sequence" />

Source

Sizes and styles

Default, outline and ghost in three sizes, and sequences.

Installv1.0.0

aiw add @ai-website/kbd

Brings along utils, kit, icon

Usage

<Kbd size="lg" variant="outline">Esc</Kbd>

Source

rating

Rating

Stars to show a score or pick one, and a summary with a bar per star.

Display
Input
Summary

Props and details

Display

Exact fractions with value and review count, three sizes and tones.

Installv1.0.0

aiw add @ai-website/rating

Brings along utils, kit

Usage

<Rating value={4.6} count={1284} showValue />

Source

Input

A feedback form with a keyboard friendly star choice.

Installv1.0.0

aiw add @ai-website/rating

Brings along utils, kit

Usage

<Rating value={value} onChange={setValue} size="lg" label="Your visit" />

Source

Summary

Average, distribution and reviews, rows filter the list.

Installv1.0.0

aiw add @ai-website/rating

Brings along utils, kit

Usage

<RatingSummary average={4.7} distribution={[912, 248, 74, 31, 19]} onSelect={setFilter} />

Source

tag

Tag

Labels for topics and status, plus filter chips with counts. For a field that turns words into tags, see Tag input.

Styles
Filter chips

Props and details

Styles

Surfaces, status dots, icons, links and removable tags.

Installv1.0.0

aiw add @ai-website/tag

Brings along utils, kit, icon

Usage

<Tag variant="outline" dot="success">Paid</Tag>

Source

Filter chips

Toggle chips with counts that filter a list.

Installv1.0.0

aiw add @ai-website/tag

Brings along utils, kit, icon

Usage

<TagGroup label="Filter" options={options} value={value} onChange={setValue} />

Source

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Data display on a page.

On this page

Sizes and kinds

Group

Presence list

Profile card

All icons

Sizes and weights

Containers

In text and menus

Cheat sheet

Sizes and styles

Display

Input

Summary

Styles

Filter chips

Similar components, Often combined with

Similar components

Often combined with