Zum Inhalt springen
UI Kit
Accent

App Shells

Das Gerüst einer Anwendung. Es ordnet Navigation, Kopfzeile, Bereiche und Inhalt auf Desktop, Tablet und Telefon, mit einer Seitenleiste, die zur Schiene und zur Schublade wird, Navigation in der Kopfzeile, drei Bereiche, die sich auf dem Telefon schieben, ein Inspektor, der zum Sheet wird, und ein Fokusmodus für eine Aufgabe.

5 Variants
Kategorie wechseln

App Shell

Seitenleiste und Kopfzeile

Eine volle Seitenleiste auf dem Desktop, eine Icon-Schiene mit Tooltips auf dem Tablet, eine Kopfzeile mit Schublade auf dem Telefon. Suche und Benachrichtigungen sitzen oben.

Im Studio öffnen

Navigation oben

Bereiche in der Kopfzeile mit gleitender Unterstreichung. Tablets bekommen sie als zweite Reihe mit Icons, Telefone eine Schublade.

Im Studio öffnen

Drei Bereiche

Schiene, Liste und Detail wie in einem Support-Posteingang. Tablets behalten Liste und Detail, Telefone zeigen die Liste und schieben das Detail mit Zurück-Knopf herein.

Im Studio öffnen

Mit Inspektor

Inhalt mit einer Detailspalte rechts, der Knopf oben blendet sie ein und aus. Unter 1024 px öffnet sie als Sheet, auf dem Tablet von rechts, auf dem Telefon von unten.

Im Studio öffnen

Fokusmodus

Eine Aufgabe ohne Ablenkung. Eine schmale Kopfzeile mit Schließen, eine Schrittleiste, die sich füllt, der Inhalt in einer schmalen Spalte und unten Zurück und Weiter.

Im Studio öffnen

Details

Was App Shell mitbringt, aus Registry und Quellcode gelesen.

Bereich
Layout
Variants
5
Version
1.0.0 · seit 1.1.0
Datei
components/ui/app-shell.tsx
Bringt mit
utilskiticon
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 11 eigene Texte
Studio
Alle 5 Variants bearbeitbar
In Sammlungen
App-Dashboard
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle AppShellProps aus components/ui/app-shell.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    AppShellVariant

    sidebartop-navthree-paneinspectorfocus

  • brandPflicht
    { name: string; logo?: React.ReactNode }
  • navoptional
    AppShellNavItem[]
  • secondaryNavoptional
    AppShellNavItem[]

    Help, settings: at the bottom of the sidebar or rail

  • useroptional
    { name: string; email?: string }
  • titleoptional
    string

    The page title in the header

  • searchoptional
    string

    A search field in the header with this placeholder

  • actionsoptional
    React.ReactNode

    Buttons at the right end of the header

  • listTitleoptional
    string

    three-pane: the list and its title, the children are the detail of the picked item

  • itemsoptional
    AppShellListItem[]
  • defaultItemoptional
    number
  • onItemChangeoptional
    (index: number) => void
  • inspectoroptional
    React.ReactNode

    inspector: the panel and its title

  • inspectorTitleoptional
    string
  • defaultInspectorOpenoptional
    boolean
  • stepsoptional
    string[]

    focus: the steps and the current one, the labels of the footer buttons

  • stepoptional
    number
  • onStepChangeoptional
    (step: number) => void
  • backLabeloptional
    string
  • nextLabeloptional
    string
  • doneLabeloptional
    string
  • notificationsHrefoptional
    string

    sidebar: address of the notifications, shows the bell in the header

  • exitHrefoptional
    string

    focus: where the close button leads, or what it does

  • onExitoptional
    () => void
  • filloptional
    boolean

    Fill the parent instead of the window height

  • childrenoptional
    React.ReactNode

Eingebaute Texte

Diese Texte schreibt App Shell selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 11 Texte anzeigen
navEnglisch MainDeutsch Hauptnavigation
menuEnglisch Open menuDeutsch Menü öffnen
closeEnglisch CloseDeutsch Schließen
searchEnglisch SearchDeutsch Suchen
notificationsEnglisch NotificationsDeutsch Benachrichtigungen
backEnglisch BackDeutsch Zurück
inspectorEnglisch Show detailsDeutsch Details zeigen
hideInspectorEnglisch Hide detailsDeutsch Details ausblenden
stepEnglisch StepDeutsch Schritt
ofEnglisch ofDeutsch von
listEnglisch ListDeutsch Liste

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • App Shell reagiert selbst auf die Tasten Escape.
  • Setzt aria-controls, aria-current, aria-expanded, aria-label, aria-modal und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rolle dialog.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 5 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich App Shell?

Mit aiw add @ai-website/app-shell. Der Befehl legt die Datei components/ui/app-shell.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind icon. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat App Shell?

5 Varianten, Seitenleiste und Kopfzeile, Navigation oben, Drei Bereiche, Mit Inspektor und Fokusmodus. Du wählst sie mit der Prop variant, zum Beispiel variant="top-nav".

Kann ich die Texte von App Shell übersetzen?

Ja. App Shell bringt 11 eigene Texte auf Deutsch und Englisch mit, etwa „Hauptnavigation“, „Menü öffnen“ und „Schließen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent App Shell einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini App Shell mit aiw_components und installieren sie mit aiw_add @ai-website/app-shell. Nenn im Prompt die Variante, etwa variant="sidebar", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich App Shell ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden AppShell-Code zum Kopieren.

Ähnliche Components

Mehr aus Layout, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben App Shells stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert