Fortschritt und Zustände

Fortschrittsbalken und Ringe, Skeletons beim Laden, leere Zustände mit dem nächsten Schritt und Stat Cards mit einer Kennzahl.

4 Components · 13 Variants

Kategorie wechseln

Auf dieser Seite

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

Fortschritt4
Leerer Zustand3
Platzhalter3
Kennzahl3

progress

Fortschritt

Balken, Ringe und Schritte, die zeigen, wie weit etwas ist.

Balken
Ringe
Schritte
Checkliste

Props und Details

Balken

Uploads, ein gestapelter Speicherbalken und drei Größen.

Installv1.0.0

aiw add @ai-website/progress

Bringt mit utils, kit, icon

Usage

<ProgressBar label="terrace.jpg" value={66} showValue />

Source

Ringe

Eine Zahl pro Ring, mit freier Mitte.

Installv1.0.0

aiw add @ai-website/progress

Bringt mit utils, kit, icon

Usage

<ProgressRing value={186} max={300} label="Bookings">…</ProgressRing>

Source

Schritte

Nummeriert, Balken und Punkte für Abläufe mit mehreren Schritten.

Installv1.0.0

aiw add @ai-website/progress

Bringt mit utils, kit, icon

Usage

<ProgressSteps steps={["Cart", "Shipping", "Payment", "Review"]} current={2} />

Source

Checkliste

Einrichtungsaufgaben mit einem Ring, der jedem Haken folgt.

Installv1.0.0

aiw add @ai-website/progress

Bringt mit utils, kit, icon

Usage

<ProgressRing value={done} max={5} size={52}>{done}/5</ProgressRing>

Source

empty-state

Leerer Zustand

Erster Start, leere Suche, Fehler und erledigter Posteingang, mit nächstem Schritt.

Erster Start
Keine Treffer
Zustände

Props und Details

Erster Start

Ein gezeichneter Kartenstapel und zwei Wege zu beginnen, in einer App.

Installv1.0.0

aiw add @ai-website/empty-state

Bringt mit utils, kit, icon, button

Usage

<EmptyState icon="folder-plus" variant="dashed" title="No projects yet" primaryAction={{ label: "Create project" }} />

Source

Keine Treffer

Eine Suche, die die Wörter behält und eine Schreibweise vorschlägt.

Installv1.0.0

aiw add @ai-website/empty-state

Bringt mit utils, kit, icon, button

Usage

<EmptyState illustration={false} icon="search" title="No dishes match" secondaryAction={{ label: "Clear search", onClick }}>…</EmptyState>

Source

Zustände

Erledigt, Fehler, gesperrt und offline als kleine Karten.

Installv1.0.0

aiw add @ai-website/empty-state

Bringt mit utils, kit, icon, button

Usage

<EmptyState size="sm" variant="card" tone="destructive" icon="alert-circle" title="Bookings did not load" />

Source

skeleton

Platzhalter

Platzhalter in der Form des Inhalts, mit weichem Licht, das bei reduzierter Bewegung stillsteht.

Karten
Liste und Dashboard
Artikel

Props und Details

Karten

Artikelkarten, die ohne Sprung zum Inhalt wechseln.

Installv1.0.0

aiw add @ai-website/skeleton

Bringt mit utils, kit

Usage

<SkeletonGroup loading={loading} content={<Cards />}><Skeleton shape="rect" className="aspect-[16/10]" /></SkeletonGroup>

Source

Liste und Dashboard

Eine Posteingangsliste und ein Bericht mit Zahlen und Diagramm.

Installv1.0.0

aiw add @ai-website/skeleton

Bringt mit utils, kit

Usage

<Skeleton shape="circle" className="size-10" /><SkeletonText lines={2} />

Source

Artikel

Ein Langtext im fertigen Rhythmus, während er lädt.

Installv1.0.0

aiw add @ai-website/skeleton

Bringt mit utils, kit

Usage

<SkeletonGroup label="Loading article"><SkeletonText lines={4} /></SkeletonGroup>

Source

stat-card

Kennzahl

Eine Zahl, die zählt, mit Veränderung, Sparkline oder Ziel.

Reihe
Mit Sparkline
Hervorgehoben und Ziele

Props und Details

Reihe

Vier Kennzahlen in einem Rahmen mit feinen Linien.

Installv1.0.0

aiw add @ai-website/stat-card

Bringt mit utils, kit, icon, number-ticker

Usage

<StatGrid><StatCard variant="plain" label="Revenue" value="$48,210" delta={{ value: "+12.4%", trend: "up" }} /></StatGrid>

Source

Mit Sparkline

Verlinkte Karten mit Icon und einer Linie über zwölf Wochen.

Installv1.0.0

aiw add @ai-website/stat-card

Bringt mit utils, kit, icon, number-ticker

Usage

<StatCard label="Visitors" value="21,904" icon="users" sparkline={weeks} href="/reports/visitors" />

Source

Hervorgehoben und Ziele

Eine große Akzentkarte mit Sparkline, zwei Karten mit Zielen.

Installv1.0.0

aiw add @ai-website/stat-card

Bringt mit utils, kit, icon, number-ticker

Usage

<StatCard variant="accent" size="lg" label="Revenue" value="$186,400" sparkline={weeks} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Fortschritt und Zustände stehen.

Auf dieser Seite

Balken

Ringe

Schritte

Checkliste

Erster Start

Keine Treffer

Zustände

Karten

Liste und Dashboard

Artikel

Reihe

Mit Sparkline

Hervorgehoben und Ziele

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit