Zum Inhalt springen
UI Kit
Accent

App Download

Die Section, die Menschen zu deiner App bringt. Store-Buttons für das Kit gezeichnet, ohne Store-Logos, QR-Codes für den Desktop und Telefone, die sich bewegen.

5 Variants
Kategorie wechseln

App Download

Mit Telefon

Text, vier Features, Store-Buttons und Bewertung links. Rechts schwebt das Telefon mit Hinweisen, die in eigenem Tempo treiben.

Im Studio öffnen

QR-Karte

Auf breiten Screens ein QR-Code mit wanderndem Scan-Strich. Auf dem Telefon weicht er großen Store-Buttons.

Im Studio öffnen

Features Schritt für Schritt

Das Telefon bleibt stehen, während die Features vorbeiziehen, und wechselt mit jedem den Screen. Auf dem Telefon bringt jeder Schritt seinen eigenen Screen mit.

Im Studio öffnen

Mittig mit drei Telefonen

Headline, Store-Buttons und Bewertung in der Mitte. Zwei Telefone hinter dem ersten fächern sich beim Hereinscrollen auf.

Im Studio öffnen

App-Banner

Eine schmale Leiste über der Seite, die die App mit Symbol und Bewertung anbietet. Schließen faltet sie weg.

Im Studio öffnen

Details

Was App Download mitbringt, aus Registry und Quellcode gelesen.

Bereich
Marketing
Variants
5
Version
1.0.1 · seit 1.0.0
Datei
components/ui/app-download.tsx
Bringt mit
utilskiticonrevealmotionsection
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 12 eigene Texte
Studio
Alle 5 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

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

  • variantoptional
    AppDownloadVariant

    phone-splitqr-cardfeature-stepscenteredsmart-banner

  • eyebrowoptional
    React.ReactNode
  • titlePflicht
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • storesoptional
    AppStores
  • ratingoptional
    { value: number; label: string }

    Average rating out of 5 and the label next to it, e.g. 12,400 ratings

  • featuresoptional
    { icon: IconName; title: string; text?: string }[]

    phone-split, qr-card: short points, feature-steps: the steps

  • mediaoptional
    React.ReactNode

    phone-split, qr-card, smart-banner: a phone or the app icon

  • screensoptional
    React.ReactNode[]

    feature-steps: one screen per feature. centered: three phones, the middle one in front.

  • qroptional
    React.ReactNode

    qr-card: the code, e.g. an <img> of your QR code

  • appoptional
    { name: string; maker?: string }

    smart-banner: app name and maker

  • notesoptional
    { icon: IconName; title: string; text: string }[]

    phone-split: small floating notes around the phone

Eingebaute Texte

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

Alle 12 Texte anzeigen
iosSmallEnglisch Download forDeutsch Laden für
iosEnglisch iPhone and iPadDeutsch iPhone und iPad
androidSmallEnglisch Get it forDeutsch Holen für
androidEnglisch AndroidDeutsch Android
webSmallEnglisch Open in theDeutsch Öffnen im
webEnglisch BrowserDeutsch Browser
scanEnglisch Scan with your phone camera to download the app.Deutsch Mit der Handykamera scannen, um die App zu laden.
starsEnglisch {v} out of 5 starsDeutsch {v} von 5 Sternen
openEnglisch OpenDeutsch Öffnen
getEnglisch Get the appDeutsch App laden
closeEnglisch CloseDeutsch Schließen
freeEnglisch FreeDeutsch Kostenlos

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Setzt aria-label, damit Screenreader Zweck und Zustand ansagen.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • 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).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 6 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich App Download?

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

Welche Varianten hat App Download?

5 Varianten, Mit Telefon, QR-Karte, Features Schritt für Schritt, Mittig mit drei Telefonen und App-Banner. Du wählst sie mit der Prop variant, zum Beispiel variant="qr-card".

Kann ich die Texte von App Download übersetzen?

Ja. App Download bringt 12 eigene Texte auf Deutsch und Englisch mit, etwa „Laden für“, „iPhone und iPad“ und „Holen für“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent App Download einbauen?

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

Kann ich App Download ohne Code anpassen?

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

Ähnliche Components

Mehr aus Marketing, demselben Bereich des Kits.

Wird oft kombiniert mit

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

Oft gesucht

Direkt zu

In die Zwischenablage kopiert