Use Cases
Ein Angebot für die Menschen, die es nutzen, in sechs Aufbauten: Reiter nach Zielgruppe, Karten je Rolle, ein Tag als Szenario, Branchen-Raster, Vorher und Nachher je Fall und eine Reihe von Geschichten.
6 Variants
Kategorie wechseln
Marketing
- Hero17
- Features15
- Logo Clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to Action11
- FAQ7
- Newsletter12
- Banners9
- Popups und Consent7
- Services7
- Use Cases6
- Security und Trust7
- Changelog und Roadmap6
- Launch und Waitlist6
- Product Tour6
- Press und Awards10
- AI Features6
- App Download5
- Spenden und Unterstützen4
- Problem und Lösung5
- Einwände5
- Rechner10
- Quiz und Produktberater5
- Kostenlos testen5
- Empfehlung und Partner10
- Community5
- Open Source5
- Manifest5
- Angebot5
- Lead-Magnet4
- Scroll-Geschichten20
- Scroll-Reisen13
- Scroll-Effekte13
- Scroll-Reveals und Übergänge15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error Pages5
- Careers7
- Case Studies6
- Portfolio6
- Events und Webinars6
- Help Center6
- Rechtstexte5
- Dokumentation4
- Suchergebnisse5
- Ressourcen und Downloads4
- Podcast4
- Redaktion15
- Autoren und Interviews10
- Glossar5
- Rezepte5
- Datengeschichten10
- Long Reads5
- Umfragen und Feedback14
- Formularzustände12
- Anfrageformulare16
- Bewerbungen und Anmeldungen13
- Adresse, Zahlung und Einwilligung12
App
- Auth9
- Dashboards6
- Tables6
- Settings5
- AI und Chat16
- Calendar5
- Inbox und Messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing und Usage10
- Developer Settings15
- Security und Zugriff10
- Import, Export und Verlauf15
- Automation und Builder14
- KI-Antworten18
- KI-Schreiben und Erstellen13
- KI-Einrichtung14
- KI-Assistenten9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms und Stays5
- Classes und Schedules6
- Arztpraxis5
- Kanzlei5
- Salon und Spa5
- Autohaus5
- Reisen5
- Sportverein5
- Coworking5
- Museum5
- Kino5
- Schule5
- Handwerk5
- Versicherung5
- Bank5
- Personal Brand15
- Speaker und Media Kits10
- Creator15
- Coaching und Beratung10
- Kunst und Musik15
- Zahnarztpraxis5
- Tierarztpraxis5
- Therapiepraxis5
- Hochzeiten und Events5
- Architekturbüro5
- Steuerberatung5
- Immobilienmakler5
- Blumenladen5
- Weingut5
- Kita5
- Fahrschule5
- Pflege5
- Festival5
Elements
- Buttons20
- Forms und Inputs22
- Picker und Auswahlfelder21
- Spezielle Eingabefelder20
- Cards10
- Overlays21
- Navigation15
- Menüleisten und Umschalter14
- Data Display15
- Fortschritt und Zustände13
- Listen, Bäume und Timelines17
- Charts22
- Vergleichs-Charts22
- Statistik-Charts20
- KPI-, Live- und Karten-Charts22
- Text Effects15
- Textakzente16
- Backgrounds19
- Beams, Partikel und Bewegung18
- Media19
- Code und JSON8
- Panels und Splitter4
Anwendungsfälle
Details
Was Anwendungsfälle mitbringt, aus Registry und Quellcode gelesen.
- Bereich
- Marketing
- Variants
- 6
- Version
- 1.0.0 · seit 1.0.0
- Datei
- components/ui/use-cases.tsx
- Bringt mit
- utilskiticonsectionreveal
- npm-Pakete
- Keine
- Sprachen
- Englisch und Deutsch, 9 eigene Texte
- Mit KI bauen
- Per MCP in Claude, Cursor, Copilot und Codex
Props
Die Schnittstelle UseCasesProps aus components/ui/use-cases.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.
variantoptionalUseCasesVarianttabsrolesscenarioindustriesbefore-afterstories
eyebrowoptionalReact.ReactNodetitleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodeactionsoptionalReact.ReactNodeitemsPflichtUseCase[]
Eingebaute Texte
Diese Texte schreibt Anwendungsfälle selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.
Alle 9 Texte anzeigen
| Schlüssel | Englisch | Deutsch |
|---|---|---|
| more | Englisch Read the story | Deutsch Geschichte lesen |
| cases | Englisch Use cases | Deutsch Anwendungsfälle |
| before | Englisch Before | Deutsch Vorher |
| after | Englisch After | Deutsch Nachher |
| previous | Englisch Previous | Deutsch Zurück |
| next | Englisch Next | Deutsch Weiter |
| explore | Englisch Explore | Deutsch Ansehen |
| forRole | Englisch For | Deutsch Für |
| day | Englisch A day with it | Deutsch Ein Tag damit |
Barrierefreiheit
Aus dem Quellcode der Component abgeleitet.
- Anwendungsfälle reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts, Pos1, Ende und Leertaste.
- Setzt aria-controls, aria-label, aria-labelledby und aria-selected, damit Screenreader Zweck und Zustand ansagen.
- Nutzt die Rollen group, items, tab, tablist und tabpanel.
- 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).
- Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
- Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
- Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 9 Stellen im Code schalten Bewegung dann ab.
Häufige Fragen
Wie installiere ich Anwendungsfälle?
Mit aiw add @ai-website/use-cases. Der Befehl legt die Datei components/ui/use-cases.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind icon, section und reveal. Weitere npm-Pakete braucht sie nicht.
Welche Varianten hat Anwendungsfälle?
6 Varianten, Reiter nach Zielgruppe, Karten je Rolle, Geteilt mit Szenario, Branchen-Raster, Vorher und Nachher je Fall und Reihe von Geschichten. Du wählst sie mit der Prop variant, zum Beispiel variant="roles".
Kann ich die Texte von Anwendungsfälle übersetzen?
Ja. Anwendungsfälle bringt 9 eigene Texte auf Deutsch und Englisch mit, etwa „Geschichte lesen“, „Anwendungsfälle“ und „Vorher“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.
Kann ein KI-Assistent Anwendungsfälle einbauen?
Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Anwendungsfälle mit aiw_components und installieren sie mit aiw_add @ai-website/use-cases. Nenn im Prompt die Variante, etwa variant="tabs", dann schreibt der Assistent deine Inhalte direkt in die Props.
Kann ich Anwendungsfälle ohne Code anpassen?
Ja, im Studio. Alle 6 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden UseCases-Code zum Kopieren.
Ähnliche Components, Wird oft kombiniert mit
Ähnliche Components
Mehr aus Marketing, demselben Bereich des Kits.
- ServicesWas du anbietest, als Cards, Listen und Detail Rows.
- Security und TrustZertifikate, Datenschutz, Uptime und Garantien.
- Popups und ConsentCookie Consent, Angebote und Ankündigungen im Dialog.
- Changelog und RoadmapWas neu ist und was als Nächstes kommt.
- Alles aus MarketingSections, die verkaufen. Heroes, Features, Pricing, Social Proof und Calls to Action.
Wird oft kombiniert mit
Sections, die auf einer Seite meist neben Use Cases stehen.
components/ui/use-cases.tsx
Quellcode lädt