Data Display

Icons, Badges, Avatars, Tags, Tastenkürzel und Ratings.

5 Components · 15 Variants

Kategorie wechseln

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

Avatar4
Icons3
Tasten3
Bewertung3
Tag2

avatar

Avatar

Menschen als Bild oder Initialen, mit Status, im Stapel und mit Namen.

Größen und Arten
Gruppe
Anwesenheit
Profilkarte

Props und Details

Größen und Arten

Sechs Größen für Bild, Initialen, eckig und Status.

Installv1.0.0

aiw add @ai-website/avatar

Bringt mit utils, kit

Usage

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

Source

Gruppe

Überlappende Stapel mit Zähler, in einer Projektkarte und drei Größen.

Installv1.0.0

aiw add @ai-website/avatar

Bringt mit utils, kit

Usage

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

Source

Anwesenheit

Avatar mit Name, Rolle und Status in einer Teamliste.

Installv1.0.0

aiw add @ai-website/avatar

Bringt mit utils, kit

Usage

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

Source

Profilkarte

Ein großer Avatar über einem Titelbild, mit Aktionen und drei Zahlen.

Installv1.0.0

aiw add @ai-website/avatar

Bringt mit utils, kit

Usage

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

Source

icon

Icons

Die eigenen Linien-Icons des Kits in 18 Gruppen, gezeichnet auf einem 24er Raster.

Alle Icons
Größen und Strich
Behälter

Props und Details

Alle Icons

Nach Name und Gruppe durchsuchbar, ein Klick kopiert den Code.

Installv1.0.1

aiw add @ai-website/icon

Bringt mit utils

Usage

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

Source

Größen und Strich

Von 16 bis 32 Pixel, drei Strichstärken und die Icons in Knöpfen, Feldern und Listen.

Installv1.0.1

aiw add @ai-website/icon

Bringt mit utils

Usage

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

Source

Behälter

Sechs ruhige Arten, ein Icon über ein Merkmal zu setzen, alle aus Tokens.

Installv1.0.1

aiw add @ai-website/icon

Bringt mit 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

Tasten

Tasten und Kürzel, die auf Apple-Geräten Befehl und sonst Strg zeigen und mit der echten Taste nach unten gehen.

In Text und Menüs
Übersicht
Größen und Stile

Props und Details

In Text und Menüs

Tasten im Satz und als Hinweis in einem Befehlsmenü.

Installv1.0.0

aiw add @ai-website/kbd

Bringt mit utils, kit, icon

Usage

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

Source

Übersicht

Alle Kürzel in drei Gruppen, als Definitionsliste.

Installv1.0.0

aiw add @ai-website/kbd

Bringt mit utils, kit, icon

Usage

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

Source

Größen und Stile

Standard, Kontur und Geist in drei Größen, dazu Folgen.

Installv1.0.0

aiw add @ai-website/kbd

Bringt mit utils, kit, icon

Usage

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

Source

rating

Bewertung

Sterne, die eine Wertung zeigen oder abfragen, und eine Übersicht mit Balken pro Stern.

Anzeige
Eingabe
Übersicht

Props und Details

Eingabe

Ein Rückmeldeformular mit tastaturfreundlicher Sternwahl.

Installv1.0.0

aiw add @ai-website/rating

Bringt mit utils, kit

Usage

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

Source

Übersicht

Durchschnitt, Verteilung und Stimmen, Zeilen filtern die Liste.

Installv1.0.0

aiw add @ai-website/rating

Bringt mit utils, kit

Usage

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

Source

tag

Tag

Etiketten für Themen und Status, dazu Filter-Chips mit Zahlen. Ein Feld, das Wörter zu Tags macht, ist die Tag-Eingabe.

Stile
Filter-Chips

Props und Details

Stile

Flächen, Statuspunkte, Icons, Links und entfernbare Tags.

Installv1.0.0

aiw add @ai-website/tag

Bringt mit utils, kit, icon

Usage

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

Source

Filter-Chips

Umschaltbare Chips mit Zahlen, die eine Liste filtern.

Installv1.0.0

aiw add @ai-website/tag

Bringt mit utils, kit, icon

Usage

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

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Data Display stehen.

Auf dieser Seite

Größen und Arten

Gruppe

Anwesenheit

Profilkarte

Alle Icons

Größen und Strich

Behälter

In Text und Menüs

Übersicht

Größen und Stile

Anzeige

Eingabe

Übersicht

Stile

Filter-Chips

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit