# Zendesk Garden-Designsystem

## Vorschau der Oberfläche des Zendesk Garden-Designsystems

Ändern Sie die Sichtbarkeit von Antworten, prüfen Sie einen kurzen Entwurf, speichern Sie einen lokalen Schnappschuss und leeren Sie den nächsten Entwurf.

## Gestaltungsreferenz für das Zendesk Garden-Designsystem

Native Garden 9.16.1 React ThemeProvider, Buttons und Formulare; eigener lokaler Entwurfsablauf.

### Eckenradius steuern

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| borderRadii.sm | 2px | Wählen Sie die Form passend zur Komponentenrolle; die mittlere Standardecke ist keine Pille. |
| borderRadii.md | 4px | Wählen Sie die Form passend zur Komponentenrolle; die mittlere Standardecke ist keine Pille. |
| borderRadii.lg | 8px | Wählen Sie die Form passend zur Komponentenrolle; die mittlere Standardecke ist keine Pille. |
### Responsive Breakpoints

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| breakpoints.xs | 0px | Breakpoints des Themes – keine Garantie, dass die Anwendung bei jedem Schritt alle Bereiche umschaltet. |
| breakpoints.sm | 576px | Breakpoints des Themes – keine Garantie, dass die Anwendung bei jedem Schritt alle Bereiche umschaltet. |
| breakpoints.md | 768px | Breakpoints des Themes – keine Garantie, dass die Anwendung bei jedem Schritt alle Bereiche umschaltet. |
| breakpoints.lg | 992px | Breakpoints des Themes – keine Garantie, dass die Anwendung bei jedem Schritt alle Bereiche umschaltet. |
| breakpoints.xl | 1200px | Breakpoints des Themes – keine Garantie, dass die Anwendung bei jedem Schritt alle Bereiche umschaltet. |
### Schriftgrößen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| fontSizes.xs | 10px | Unterschiedliche Rollen für Fließtext, Beschriftungen, Metadaten und Überschriften beibehalten. |
| fontSizes.sm | 12px | Unterschiedliche Rollen für Fließtext, Beschriftungen, Metadaten und Überschriften beibehalten. |
| fontSizes.md | 14px | Unterschiedliche Rollen für Fließtext, Beschriftungen, Metadaten und Überschriften beibehalten. |
| fontSizes.lg | 18px | Unterschiedliche Rollen für Fließtext, Beschriftungen, Metadaten und Überschriften beibehalten. |
| fontSizes.xl | 22px | Unterschiedliche Rollen für Fließtext, Beschriftungen, Metadaten und Überschriften beibehalten. |
| fontSizes.xxl | 26px | Unterschiedliche Rollen für Fließtext, Beschriftungen, Metadaten und Überschriften beibehalten. |
| fontSizes.xxxl | 36px | Unterschiedliche Rollen für Fließtext, Beschriftungen, Metadaten und Überschriften beibehalten. |
### Zeilenhöhen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| lineHeights.sm | 16px | Zusammen mit der Textrolle verwenden; nicht alle Zeilenhöhen aus der Schriftgröße ableiten. |
| lineHeights.md | 20px | Zusammen mit der Textrolle verwenden; nicht alle Zeilenhöhen aus der Schriftgröße ableiten. |
| lineHeights.lg | 24px | Zusammen mit der Textrolle verwenden; nicht alle Zeilenhöhen aus der Schriftgröße ableiten. |
| lineHeights.xl | 28px | Zusammen mit der Textrolle verwenden; nicht alle Zeilenhöhen aus der Schriftgröße ableiten. |
| lineHeights.xxl | 32px | Zusammen mit der Textrolle verwenden; nicht alle Zeilenhöhen aus der Schriftgröße ableiten. |
| lineHeights.xxxl | 44px | Zusammen mit der Textrolle verwenden; nicht alle Zeilenhöhen aus der Schriftgröße ableiten. |
### Abstandsstufen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| space.base | 4 | Abstandseinträge des Themes für einen gleichmäßigen Rhythmus. |
| space.xxs | 4px | Abstandseinträge des Themes für einen gleichmäßigen Rhythmus. |
| space.xs | 8px | Abstandseinträge des Themes für einen gleichmäßigen Rhythmus. |
| space.sm | 12px | Abstandseinträge des Themes für einen gleichmäßigen Rhythmus. |
| space.md | 20px | Abstandseinträge des Themes für einen gleichmäßigen Rhythmus. |
| space.lg | 32px | Abstandseinträge des Themes für einen gleichmäßigen Rhythmus. |
| space.xl | 40px | Abstandseinträge des Themes für einen gleichmäßigen Rhythmus. |
| space.xxl | 48px | Abstandseinträge des Themes für einen gleichmäßigen Rhythmus. |
### Zuordnung semantischer Rollen für helle Themes

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| colors.variables.light.background.default | palette.white | Rollenalias des Themes; über den ausgewählten Farbton und die Palette auflösen, statt den Alias als CSS-Farbe zu behandeln. |
| colors.variables.light.background.subtle | neutralHue.100 | Rollenalias des Themes; über den ausgewählten Farbton und die Palette auflösen, statt den Alias als CSS-Farbe zu behandeln. |
| colors.variables.light.background.danger | dangerHue.100 | Rollenalias des Themes; über den ausgewählten Farbton und die Palette auflösen, statt den Alias als CSS-Farbe zu behandeln. |
| colors.variables.light.background.primaryEmphasis | primaryHue.700 | Rollenalias des Themes; über den ausgewählten Farbton und die Palette auflösen, statt den Alias als CSS-Farbe zu behandeln. |
| colors.variables.light.foreground.default | neutralHue.900 | Rollenalias des Themes; über den ausgewählten Farbton und die Palette auflösen, statt den Alias als CSS-Farbe zu behandeln. |
| colors.variables.light.foreground.subtle | neutralHue.700 | Rollenalias des Themes; über den ausgewählten Farbton und die Palette auflösen, statt den Alias als CSS-Farbe zu behandeln. |
| colors.variables.light.foreground.onEmphasis | palette.white | Rollenalias des Themes; über den ausgewählten Farbton und die Palette auflösen, statt den Alias als CSS-Farbe zu behandeln. |
| colors.variables.light.foreground.primary | primaryHue.700 | Rollenalias des Themes; über den ausgewählten Farbton und die Palette auflösen, statt den Alias als CSS-Farbe zu behandeln. |
| colors.variables.light.foreground.danger | dangerHue.700 | Rollenalias des Themes; über den ausgewählten Farbton und die Palette auflösen, statt den Alias als CSS-Farbe zu behandeln. |
| colors.variables.light.border.default | neutralHue.300 | Rollenalias des Themes; über den ausgewählten Farbton und die Palette auflösen, statt den Alias als CSS-Farbe zu behandeln. |
| colors.variables.light.border.subtle | neutralHue.200 | Rollenalias des Themes; über den ausgewählten Farbton und die Palette auflösen, statt den Alias als CSS-Farbe zu behandeln. |
| colors.variables.light.border.danger | dangerHue.300 | Rollenalias des Themes; über den ausgewählten Farbton und die Palette auflösen, statt den Alias als CSS-Farbe zu behandeln. |
| colors.variables.light.border.primaryEmphasis | primaryHue.700 | Rollenalias des Themes; über den ausgewählten Farbton und die Palette auflösen, statt den Alias als CSS-Farbe zu behandeln. |
## Vollständiger Leitfaden zum Zendesk Garden-Designsystem

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## Zendesk Garden Designsystem für die Struktur eines Support-Arbeitsbereichs

### Kundenanfrage im Blick behalten

> Ein Support-Editor benötigt genügend Kontext, damit die Antwort nicht nur ausgefeilt, sondern auch relevant ist. Im Beispiel steht die Kundenanfrage über dem Entwurf; Anfragesteller, Organisation und Thema befinden sich daneben. Die Oberfläche ist kompakt genug, um den neuen Text mit der ursprünglichen Frage zu vergleichen, ohne den Bildschirm zu wechseln.

### Verlauf und aktiven Entwurf trennen

Gespeicherte lokale Einträge erscheinen mit einer eindeutigen Sichtbarkeitskennzeichnung über dem Editor. Der aktive Entwurf bleibt im nativen Textarea-Feld. Beim Speichern wird ein Snapshot hinzugefügt und das Feld geleert, sodass spätere Änderungen einen zuvor gespeicherten Eintrag nicht unbemerkt überschreiben können.

## Zendesk Garden Designsystem: Theme-Rollen und Farbpalette

### Aliases prüfen, bevor Farben übernommen werden

Garden 9 DEFAULT_THEME ordnet semantischen Rollen Farbfamilien und nummerierte Palettenwerte zu. Eine Rolle wie background.primaryEmphasis ist kein wörtlicher Hexadezimalwert. Die Referenztabelle behält diese Aliases bei, damit sich bei einem benutzerdefinierten Theme der Primärfarbton ändern lässt, ohne dass hartcodierte blaue Fragmente in nativen Steuerelementen zurückbleiben.

### Eigene Bereiche mit dem Provider kompatibel halten

ThemeProvider stellt das Styling nativer Komponenten bereit. Dieses Beispiel verwendet DEFAULT_THEME und einen dazu passenden benutzerdefinierten hellen Arbeitsbereich. Es fügt keinen vorgetäuschten Dunkelmodus-Schalter hinzu, der lediglich den umgebenden Hintergrund ändert. Wenn Sie Unterstützung für Farbschemata ergänzen, passen Sie die Farben der eigenen Nachrichten und der Seitenleiste zusammen mit denen des Providers an.

## Zendesk Garden Designsystem: Typografie und Dichte

### Arbeitstext mit 14px gut lesbar halten

Das Standard-Theme bietet eine mittlere Schriftrolle mit 14px und eine Zeilenhöhe von 20px sowie separate Rollen für unterstützenden Text mit 12px und Überschriften mit 18px. Im Beispiel ist der Ticket-Titel 26px groß, während Kontextmetadaten kleiner gesetzt sind. Die ursprüngliche Kundennachricht und gespeicherte Notizen bleiben im normalen Fließtext und werden nicht zu komprimierten Beschriftungen.

### Lange Antworten natürlich umbrechen lassen

Gespeicherter Text behält Zeilenumbrüche bei und bricht lange Wörter um. So bleibt die vollständige Notiz auch auf schmalen Mobilbildschirmen sichtbar, ohne horizontales Scrollen zu erzwingen. Der Editor wächst mit seinem Textarea-Feld in die Höhe, statt den gesamten Nachrichtenverlauf in einen eigenen Scrollbereich zu verwandeln.

## Zendesk Garden Designsystem: Zusammenspiel von Feldern und Schaltflächen

### Beschriftung, Hinweis und Fehlermeldung verknüpfen

Das native Field gruppiert Label, Hint, Textarea und die bedingte Message. Die validation-Prop ändert das Erscheinungsbild des Textarea-Felds, wenn die festgelegte Mindestlänge nicht erreicht wird. So wird die Komposition der Komponente genutzt, statt eine nicht zugehörige Textzeile außerhalb des Felds rot einzufärben.

### Sichtbarkeit über ein eigenes Steuerelement festlegen

Über ein natives Select wird „Öffentliche Antwort“ oder „Interne Notiz“ ausgewählt. Beschriftung und Hinweis passen sich dem Modus an, und der gespeicherte Snapshot enthält ebenfalls diesen Modus. Die Aktion heißt in beiden Fällen „Lokalen Entwurf speichern“ und macht so deutlich, dass mit der Auswahl von „Öffentliche Antwort“ keine Nachricht gesendet wird.

## Zendesk Garden Designsystem: Entwurfsstatus und lokaler Verlauf

### Nachricht vor dem Hinzufügen validieren

Die Anwendung verlangt mindestens zwölf Zeichen nach dem Entfernen führender und nachfolgender Leerzeichen. Bei einer fehlgeschlagenen Übermittlung bleibt der Entwurf erhalten, eine Feldmeldung wird angezeigt und der Fokus auf das Textarea-Feld gesetzt. Durch Bearbeiten wird der veraltete Fehler gelöscht; bei der nächsten Übermittlung wird der aktuelle Text erneut geprüft. Diese Regel ist Anwendungsverhalten und kein undokumentierter Garden-Standard.

### Interne Notizen visuell hervorheben

Interne Einträge erhalten einen warmen Hintergrund und die ausgeschriebene Kennzeichnung „Entwurf einer internen Notiz“. Öffentliche Einträge verwenden die normale Oberfläche. Beide sind ausdrücklich als „Nicht gesendet“ gekennzeichnet. Der Unterschied veranschaulicht den Sichtbarkeitskontext, ohne eine echte Zendesk-Konversation nachzuahmen oder den Eindruck zu erwecken, dass jemand anderes etwas erhalten hat.

## Zendesk Garden Designsystem: Responsive Arbeitsbereiche

### Kontext nach der Hauptaufgabe anordnen

Am Breakpoint der Anwendung wird der Ticketkontext unter die Konversation und den Editor verschoben. Die Reihenfolge im zugrunde liegenden Dokument bleibt unverändert. Auf einem Smartphone erstreckt sich das Steuerelement für die Sichtbarkeit über die verfügbare Breite. Die Aktionszeile wird umgebrochen, damit Schaltflächenbeschriftungen nicht gequetscht werden.

### Moderate Radien und feine Trennlinien verwenden

Native Steuerelemente verwenden die Radien 2px, 4px und 8px. Die Bereiche für die ursprüngliche Nachricht haben abgerundete Ecken mit 4px und dezente Rahmen. Eine stärkere visuelle Hervorhebung ist der aktiven Aktion und dem Validierungsstatus vorbehalten, nicht Schatten um jede einzelne Nachricht.

## Zendesk Garden Designsystem: Validierung und Wiederherstellung der Tastaturbedienung

### Den gesamten Entwurfsablauf durchspielen

Bei einer sinnvollen Prüfung wird zunächst eine ungültige Übermittlung getestet. Anschließend wird überprüft, ob Tippen, Ändern der Sichtbarkeit, Speichern und Leeren die Oberfläche verständlich halten. Der Quellcode verwendet einen React ref, um nach einem Fehler oder dem Leeren den Fokus wiederherzustellen. Die Anzahl der Ergebnisse wird in einem Statusbereich ausgegeben.

1. Übermitteln Sie einen kurzen Entwurf und prüfen Sie die Fehlermeldung am Feld.

2. Wählen Sie „Interne Notiz“, geben Sie eine hilfreiche Notiz ein und speichern Sie sie.

3. Leeren Sie einen späteren Entwurf und vergewissern Sie sich, dass der gespeicherte lokale Snapshot erhalten bleibt.

### Eine stabile Lesereihenfolge beibehalten

Die Anfrage steht vor dem Entwurf; neu gespeicherte lokale Snapshots bleiben chronologisch geordnet. Native Schaltflächen geben ihre Aktionen als Text aus. Hinter dem Editor verbergen sich weder Tastenkombinationen noch automatisches Senden, und die Auswahl der Sichtbarkeit bleibt ein beschriftetes Select.

## Integration des Zendesk Garden-Designsystems React

### Kompatible Paketversionen installieren

Das Beispiel bindet Theming, Schaltflächen und Formulare an Version 9.16.1 und verwendet React 18 mit styled-components. Ältere Generationen der Garden-Pakete können zu unterschiedlichen Erwartungen an das Theme führen. Der vollständige JSX-Einstiegspunkt enthält den Provider, die Feldkomposition und den lokalen Status; die Datei CSS enthält nur das individuell gestaltete Layout.

- @zendeskgarden/react-theming 9.16.1

- @zendeskgarden/react-buttons 9.16.1

- @zendeskgarden/react-forms 9.16.1

### Nur die fehlende Service-Schicht ergänzen

Damit dies zu einem echten Support-Tool wird, müssen autorisierte Ticketdaten, Berechtigungsprüfungen und ein verifizierter Sende-/Entwurfsvorgang API mit Lade- und Fehlerverhalten ergänzt werden. Behalten Sie die Semantik des lokalen Snapshots bei, bis diese Antworten vorliegen. Ändern Sie die Schaltflächenbeschriftung nicht in „Senden“, nur weil die Formularvalidierung erfolgreich ist.

## Zendesk Garden Designsystem: Komponentenbeispiele

### main.jsx — vollständiges, funktionsfähiges Beispiel

Verfassen Sie einen Antwortentwurf, während der Kundenkontext sichtbar bleibt. Der folgende Quellcode ist der vollständige React-Eintrag einschließlich Statusverwaltung und Validierung.

```
import React, { useState, useRef } from "react";
import { createRoot } from "react-dom/client";
import { ThemeProvider, DEFAULT_THEME } from "@zendeskgarden/react-theming";
import { Button } from "@zendeskgarden/react-buttons";
import {
  Field,
  Label,
  Textarea,
  Hint,
  Message,
  Select,
} from "@zendeskgarden/react-forms";
import "./garden.css";
function App() {
  const [mode, setMode] = useState("public"),
    [text, setText] = useState(""),
    [error, setError] = useState(false),
    [items, setItems] = useState([]);
  const ref = useRef();
  function submit(e) {
    e.preventDefault();
    if (text.trim().length < 12) {
      setError(true);
      ref.current.focus();
      return;
    }
    setItems([...items, { mode, text: text.trim() }]);
    setText("");
    setError(false);
  }
  return (
    <ThemeProvider theme={DEFAULT_THEME}>
      <main className="garden-workspace">
        <header>
          <span>SUPPORT WORKSPACE / FICTIONAL TICKET</span>
          <h1>Help with an invoice address</h1>
          <p>Ticket #1028 · Nadia Walker · Email channel</p>
        </header>
        <div className="garden-grid">
          <section>
            <div className="message customer">
              <strong>Nadia Walker</strong>
              <small>Customer · example message</small>
              <p>
                Could you update the company address on our next invoice? The
                billing contact has changed.
              </p>
            </div>
            {items.map((i, n) => (
              <article className={"message " + i.mode} key={n}>
                <strong>
                  {i.mode === "public"
                    ? "Public reply draft"
                    : "Internal note draft"}
                </strong>
                <small>Saved locally · not sent</small>
                <p>{i.text}</p>
              </article>
            ))}
            <form onSubmit={submit} noValidate>
              <div className="composer-head">
                <h2>Compose a draft</h2>
                <Field>
                  <Label>Visibility</Label>
                  <Select
                    value={mode}
                    onChange={(e) => setMode(e.target.value)}
                  >
                    <option value="public">Public reply</option>
                    <option value="internal">Internal note</option>
                  </Select>
                </Field>
              </div>
              <Field>
                <Label>
                  {mode === "public" ? "Reply text" : "Internal note"}
                </Label>
                <Hint>
                  {mode === "public"
                    ? "Prepared for the customer; this demo will not send it."
                    : "Internal context for the support team; saved only in this page."}
                </Hint>
                <Textarea
                  ref={ref}
                  value={text}
                  rows={5}
                  validation={error ? "error" : undefined}
                  onChange={(e) => {
                    setText(e.target.value);
                    setError(false);
                  }}
                />
                {error && (
                  <Message validation="error">
                    Write at least 12 characters.
                  </Message>
                )}
              </Field>
              <div className="composer-actions">
                <span>{text.length} characters</span>
                <Button
                  type="button"
                  onClick={() => {
                    setText("");
                    setError(false);
                    ref.current.focus();
                  }}
                >
                  Clear draft
                </Button>
                <Button isPrimary type="submit">
                  Save local draft
                </Button>
              </div>
            </form>
            <p role="status">
              {items.length > 0
                ? `${items.length} draft${items.length === 1 ? "" : "s"} saved locally. No message sent.`
                : ""}
            </p>
          </section>
          <aside>
            <h2>Ticket context</h2>
            <dl>
              <dt>Requester</dt>
              <dd>Nadia Walker</dd>
              <dt>Organization</dt>
              <dd>Northstar Studio</dd>
              <dt>Priority</dt>
              <dd>Normal</dd>
              <dt>Topic</dt>
              <dd>Billing details</dd>
            </dl>
            <div className="context-note">
              <h3>Before replying</h3>
              <ul>
                <li>Confirm the billing contact.</li>
                <li>Keep invoice identifiers out of public examples.</li>
                <li>State whether the change affects future invoices.</li>
              </ul>
            </div>
          </aside>
        </div>
        <footer>
          Native Garden 9.16.1 React components. Original local drafting
          workflow; no Zendesk connection.
        </footer>
      </main>
    </ThemeProvider>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

Code-Referenz

- Erstellen Sie ein Vite-Projekt React, behalten Sie <div id="root"></div> bei und laden Sie diese Datei als src/main.jsx.

### garden.css — ursprüngliches responsives Layout

Anwendungslayout, das um die nativen Komponenten herum aufgebaut ist.

```
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font:
    14px/1.5 system-ui,
    sans-serif;
  color: #293239;
  background: #f8f9f9;
}
.garden-workspace header {
  padding: 24px 32px;
  background: white;
  border-bottom: 1px solid #d8dcde;
}
.garden-workspace header span {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #5c6970;
}
.garden-workspace h1 {
  font-size: 26px;
  line-height: 1.3;
  margin: 8px 0;
}
.garden-workspace header p {
  color: #5c6970;
  margin: 0;
}
.garden-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  padding: 24px 32px;
}
.message {
  padding: 20px;
  background: white;
  border: 1px solid #d8dcde;
  border-radius: 4px;
  margin-bottom: 16px;
}
.message p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 12px 0 0;
}
.message small {
  display: block;
  color: #5c6970;
  margin-top: 4px;
}
.message.internal {
  background: #fff8ed;
  border-color: #e7ce99;
}
form {
  padding: 24px;
  background: white;
  border: 1px solid #d8dcde;
  border-radius: 4px;
}
.composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.composer-head > div {
  max-width: 220px;
}
.garden-workspace h2 {
  font-size: 18px;
  margin: 0 0 12px;
}
.composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
.composer-actions span {
  font-size: 12px;
  color: #5c6970;
  margin-right: auto;
}
.garden-grid aside {
  background: white;
  border: 1px solid #d8dcde;
  border-radius: 4px;
  padding: 20px;
  align-self: start;
}
dl {
  margin: 0;
}
dt {
  font-size: 12px;
  color: #5c6970;
  margin-top: 16px;
}
dd {
  margin: 4px 0 0;
  font-weight: 600;
}
.context-note {
  margin-top: 24px;
  border-top: 1px solid #e8eaec;
  padding-top: 16px;
}
.context-note h3 {
  font-size: 14px;
}
.context-note ul {
  padding-left: 18px;
  font-size: 12px;
}
.context-note li {
  margin: 8px 0;
}
footer {
  padding: 16px 32px;
  font-size: 12px;
  color: #5c6970;
  border-top: 1px solid #d8dcde;
  background: white;
}
@media (max-width: 850px) {
  .garden-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 550px) {
  .garden-grid {
    padding: 16px;
  }
  .garden-workspace header {
    padding: 20px 16px;
  }
  .composer-head {
    display: block;
  }
  .composer-head > div {
    max-width: none;
  }
  .composer-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .composer-actions span {
    width: 100%;
  }
  form {
    padding: 16px;
  }
}
```

Code-Referenz

- Speichern Sie die Datei neben main.jsx. Diese benutzerdefinierten Layoutregeln sind von der Token-Referenz der Bibliothek getrennt.

## Zendesk Garden Einrichtung des Designsystem-Agenten

### Ausgangspunkt für die Implementierung

Das Beispiel mit den festgelegten nativen Komponenten wurde gebündelt und lokal im Browser geprüft. Das Beispiel verwendet ausschließlich den lokalen Anwendungszustand.

```
npm create vite@latest garden-draft -- --template react
cd garden-draft
npm install
npm install react@18.3.1 react-dom@18.3.1 styled-components @zendeskgarden/react-theming@9.16.1 @zendeskgarden/react-buttons@9.16.1 @zendeskgarden/react-forms@9.16.1
# Replace src/main.jsx and add src/garden.css.
npm run dev
```

### Ein Prompt für dein Projekt

```
Erstellen Sie einen Composer für Garden-Supportanfragen mit nativer Field/Label/Hint/Textarea/Message-Komposition. Bewahren Sie die Sichtbarkeit in jedem gespeicherten Entwurfs-Snapshot, validieren Sie vor dem Anhängen, behalten Sie den Kundenkontext bei und unterscheiden Sie zwischen lokalem Speichern und Senden. Verwenden Sie die exakten Theme-Rollen und die vollständige Quelle hier.
```

## Zendesk Garden Quellen und Geltungsbereich des Designsystems

OpenDesign Anwendungsleitfaden. Native Garden-Komponenten rendern das Beispiel; fiktive Ticketinhalte und lokale Entwürfe stellen keine Verbindung zu Zendesk her und versenden keine Nachrichten.

- Garden-Formulare Native Field-, Label- und Validierungskomposition.

- Garden-Schaltflächen Aktionsvarianten und unterstützte Größen.

- Theme-Quelle DEFAULT_THEME-Aliase, Palette und Skalen.

## Zendesk Garden Zugehörige Ressourcen zum Designsystem

### Adeo Mozaic

Erstelle eine praktische Mengensteuerung mit Mozaics magischer 16-px-Einheit, abgestimmten 48-px-Steuerelementen, echten SCSS-Imports und BEM-Klassen. Der Regalplaner macht Grenzwerte, typisierte Fehler und eine lokale Materialübersicht sichtbar.

### Adobe Spectrum

Lernen Sie React Spectrum v3 anhand einer auswählbaren Tabelle für kreative Assets und eines Inspektors für Exportvorgaben kennen. Erfahren Sie mehr über Provider-Themes und Eingabeskalen, unterstützte Style-Props, schlüsselbasierte Collections und die Abgrenzung zwischen v3 und der neueren Implementierung Spectrum 2.

### Alaska Airlines Auro

Entdecke Auro’s Alaska-Theme anhand echter semantischer Farb- und Typografie-Tokens, klassenbasierter Typografie und der nativen Flugkomponente. Zwei eigene Flugdaten zeigen lokale Filterung und Auswahl, ohne den Eindruck echter Airline-Angebote oder Buchungen zu erwecken.


- [Implementierungsreferenz](https://garden.zendesk.com/components/input/)
- [Quelle](https://github.com/zendeskgarden/react-components/tree/main/packages/theming)
- [Code-Referenz](https://garden.zendesk.com/components/input/)
- [Garden-Formulare Native Field-, Label- und Validierungskomposition.](https://garden.zendesk.com/components/input/)
- [Garden-Schaltflächen Aktionsvarianten und unterstützte Größen.](https://garden.zendesk.com/components/button/)
- [Theme-Quelle DEFAULT_THEME-Aliase, Palette und Skalen.](https://github.com/zendeskgarden/react-components/tree/main/packages/theming)