# React Suite-Designsystem

## Vorschau der React Suite-Designsystem-Oberfläche

Wähle einen Tag aus, sieh dir lokale Termine an, füge über ein Modal einen Termin hinzu oder entferne ihn. Das Hinzufügen an Wochenenden ist deaktiviert.

## Designreferenz für das React Suite-Designsystem

Kompiliertes Stylesheet von React Suite 6.2.4, abgeglichen mit der aktuellen Dokumentation zu den Variablen in v6 CSS. Die folgenden Werte sind erste Standarddefinitionen; semantische Aliasnamen können in anderen Provider-Themes abweichende Werte auflösen. Regeln für das ursprüngliche Kalenderlayout sind separat gekennzeichnet.

### Typografie

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --rs-font-family-base | -apple-system, BlinkMacSystemFont, Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STXihei, sans-serif | Systemschriftarten-Stack mit CJK-Fallbacks. |
| --rs-html-font-size | 16px | Root-Größe. |
| --rs-font-size-sm | 0.875rem | 14px bei einer Root-Größe von 16px; standardmäßige Fließtextgröße. |
| --rs-font-size-md | 1rem | 16px bei standardmäßiger Root-Größe. |
| --rs-font-size-lg | 1.125rem | 18px bei standardmäßiger Root-Größe. |
| --rs-font-size-xl | 1.25rem | 20px bei standardmäßiger Root-Größe. |
| --rs-font-size-2xl | 1.5rem | 24px bei standardmäßiger Root-Größe. |
| --rs-line-height-md | calc(20 / 14) | Standardmäßiges Fließtextverhältnis. |
### Abstände und Radien

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --rs-spacing | 0.25rem | Basisabstandsschritt. |
| --rs-padding-inline-md | 12px | Mittlerer horizontaler Innenabstand für Komponenten. |
| --rs-padding-block-md | 8px | Mittlerer vertikaler Innenabstand für Komponenten. |
| --rs-radius-sm | 0.25rem | 4px bei standardmäßiger Root-Größe. |
| --rs-radius-md | 0.375rem | 6px bei standardmäßiger Root-Größe. |
| --rs-radius-lg | 0.5rem | 8px bei standardmäßiger Root-Größe. |
| --rs-radius-xl | 0.75rem | 12px bei standardmäßiger Root-Größe. |
### Primärfarbskala

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --rs-primary-50 | #F2FAFF | Standardstufe 50 der Primärpalette. |
| --rs-primary-100 | #CCE9FF | Standardstufe 100 der Primärpalette. |
| --rs-primary-200 | #A6D7FF | Standardstufe 200 der Primärpalette. |
| --rs-primary-300 | #80C3FF | Standardstufe 300 der Primärpalette. |
| --rs-primary-400 | #59AFFF | Standardstufe 400 der Primärpalette. |
| --rs-primary-500 | #3498ff | Standardstufe 500 der Primärpalette. |
| --rs-primary-600 | #2589F5 | Standardstufe 600 der Primärpalette. |
| --rs-primary-700 | #1675E0 | Standardstufe 700 der Primärpalette. |
| --rs-primary-800 | #0A5DC2 | Standardstufe 800 der Primärpalette. |
| --rs-primary-900 | #004299 | Standardstufe 900 der Primärpalette. |
### Semantische Oberflächen und Zustände

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --rs-bg-card | var(--rs-gray-0) | Oberfläche für Kalender und Agenda. |
| --rs-bg-well | var(--rs-gray-50) | Hintergrund der gesamten Seite. |
| --rs-bg-overlay | var(--rs-gray-0) | Modaloberfläche. |
| --rs-text-primary | var(--rs-gray-800) | Fließtext. |
| --rs-text-secondary | var(--rs-gray-600) | Metadaten und Hilfetexte. |
| --rs-text-error | var(--rs-color-red) | Validierungsmeldung. |
| --rs-border-primary | var(--rs-gray-200) | Trennlinien in der Agenda und Panelbegrenzungen. |
| --rs-btn-primary-bg | var(--rs-primary-500) | Füllfarbe der primären Schaltfläche. |
| --rs-btn-primary-text | var(--rs-gray-0) | Text der primären Schaltfläche. |
| --rs-state-focus-shadow | 0 0 0 2px rgb(from var(--rs-primary-500) r g b / 25%) | Fokusbetonung. |
### Gestaltungsentscheidungen für den Kalender

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| isoWeek | true | Die Kalenderwochen beginnen am Montag. |
| Initial date | new Date(2026, 9, 14) | Festes Oktoberbeispiel; JavaScript Monate werden ab null gezählt. |
| Layout switch | 760px | Ursprünglicher Breakpoint für eine Spalte. |
| Weekend rule | getDay() is 0 or 6 | Ursprüngliche lokale Planungsregel, keine Einschränkung von Calendar. |
## React Suite Designsystem – vollständiger Leitfaden

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.

## React Suite Designsystem – ein nativer Kalender mit separater Agenda

### Ein nativer Kalender mit separater Agenda

> React Suite richtet sich an komponentenreiche Anwendungen und bietet sowohl Steuerelemente als auch größere Arbeitsflächen wie Calendar. Dieses Beispiel verwendet Version 6.2.4 mit dem kompilierten Stylesheet. Ein CustomProvider umschließt die Anwendung; Calendar, Panel, Modal und weitere Komponenten werden aus rsuite importiert.

Der Kalender gibt nicht vor, ein angebundener Planungsdienst zu sein. Er enthält zwei anfängliche Beispielsitzungen und ermöglicht lokale Ergänzungen und Löschungen. Der ausgewählte Tag und die Liste der Einträge sind separate Zustände in React. Daher ändert das Navigieren zu einem Tag nicht den Terminplan. Im vollständigen App-Quellcode lassen sich alle Zustandsübergänge nachvollziehen.

Unterstützende Spezifikation lesen

## React Suite-Designsystem: Referenz der Variablen in v6 CSS

### Referenz für CSS-Variablen in v6

Die Spezifikation basiert auf dem installierten CSS v6 und nicht auf einem älteren Less-Tutorial. Typografie, Abstände, Radien, Farbpalette und semantische Rollen stehen alle als --rs-Variablen zur Verfügung. Im Standarddesign wird für den Fließtext die kleine Schriftgröße von 0.875rem verwendet, während die Root-Größe bei sechzehn Pixeln bleibt. Dieser Unterschied erklärt, warum eine standardmäßige Komponentenoberfläche dichter wirken kann als ein Inhaltstext mit sechzehn Pixeln.

Die Seite verwendet --rs-bg-well als Hintergrund hinter den --rs-bg-card-Panels und --rs-border-primary für die Trennlinien der Agenda. Eine Markierung verwendet primary-500; ein Feldfehler nutzt die semantische Rolle text-error. Die Referenz behält Aliase für Text und Oberflächen bei, damit die Rollen verständlich bleiben, wenn ein Provider-Theme ihre Zuordnung ändert.

Unterstützende Spezifikation lesen

## React Suite Designsystem – die Bibliotheksskalierung rund um den Kalender verwenden

### Die Bibliotheksskalierung rund um den Kalender verwenden

Die tatsächliche Radius-Skala umfasst bei standardmäßiger Root-Größe Werte von vier, sechs, acht und zwölf Pixeln für sm bis xl. Der Basisabstandsschritt beträgt 0.25rem. Statt diese Werte als dekorative Palette zu behandeln, verwendet das bereitgestellte CSS tatsächliche Oberflächen- und Textvariablen in der umgebenden Agenda und den Hilfetexten.

Die Überschrift der Anwendung verwendet explizit 32px bei einer Zeilenhöhe von 1.2; auf schmalen Bildschirmen wird sie auf 28px verkleinert. Sitzungstitel verwenden siebzehn Pixel, damit sie in kompakte Agendaeinträge passen. Diese Entscheidungen für die Seite überschreiben nicht die globalen Schriftvariablen der Bibliothek. Kalenderbeschriftungen und Modalsteuerelemente behalten daher ihre nativen Komponentengrößen.

Unterstützende Spezifikation lesen

## React Suite Designsystem – das ausgewählte Datum ohne UTC-Abweichungen steuern

### Ausgewähltes Datum ohne UTC-Verschiebung steuern

Calendar erhält einen Date-Wert, und onSelect aktualisiert den ausgewählten Wert. isoWeek lässt die sichtbare Woche am Montag beginnen. Der feste Anfangswert verwendet new Date(2026,9,14), wobei neun für Oktober steht, da die Monate in JavaScript ab null gezählt werden. Die Seite ist ein bewusst festgelegtes Beispiel und keine Aussage über den heutigen Kalender.

Die Funktion zum Erstellen des Schlüssels verwendet getFullYear, getMonth und getDate, um einen lokalen Schlüssel im Format YYYY-MM-DD zu erzeugen. Sie vermeidet toISOString().slice(0,10), das eine Umwandlung über UTC vornimmt und den lokalen Kalendertag in manchen Zeitzonen verschieben kann. Diese Einträge stellen Datumsangaben ohne Uhrzeit dar. Eine implizite UTC-Umwandlung würde daher eine Bedeutung hinzufügen, die in den Daten nicht enthalten ist.

Unterstützende Spezifikation lesen

## React Suite Designsystem – Datumsmarkierungen und Inhalte für den ausgewählten Tag

### Datumsmarkierungen und Inhalte für den ausgewählten Tag

renderCell prüft, ob die lokalen Einträge ein Element für das jeweilige Datum enthalten, und gibt eine kleine Ereignismarkierung zurück. Die Markierung dient als Ergänzung: Bei Auswahl des Datums werden die tatsächlichen Titel in der Agenda angezeigt. Ein farbiger Punkt allein würde weder erkennen lassen, was geplant ist, noch ermöglichen, den richtigen Eintrag zu entfernen.

Der kompakte Kalender bleibt schmal genug für die mobile Ansicht. Die Agenda ist ein separates Panel mit Datumsüberschrift, Sitzungskarten und einer lokalen Aktion zum Hinzufügen. Am ursprünglichen Breakpoint von 760px wird sie unter den Kalender verschoben. So muss kein vollständiger Ereignistitel in jede Kalenderzelle gequetscht werden und es entsteht kein unlesbarer Kalender mit horizontalem Bildlauf.

1. Wählen Sie den Beispieltages mit der Navigationsprüfung aus.

2. Lesen Sie den Sitzungstitel in der Agenda ab, statt sich auf den Punkt zu verlassen.

3. Entfernen Sie die Sitzung und prüfen Sie, ob ihre Datumsmarkierung verschwindet, sobald keine Einträge mehr vorhanden sind.

Unterstützende Spezifikation lesen

## React Suite Designsystem – Planungsregeln der Anwendung sind ausdrücklich festgelegt

### Regeln für die Terminplanung der Anwendung sind explizit

Die Planung an Wochenenden wird mithilfe der Werte null und sechs von getDay() deaktiviert. Der Kalender lässt die Auswahl dieser Tage weiterhin zu, damit die Agenda die Regel erläutern kann, statt den Eindruck zu erwecken, der Tag sei fehlerhaft. Es erscheint eine Warnmeldung und die Schaltfläche zum Hinzufügen wird deaktiviert. Dies ist eine lokale Teamregel und keine Einschränkung von React Suite Calendar.

Für einen Wochentag ohne Sitzungen wird ein eindeutiger Leerzustand angezeigt; die Aktion zum Hinzufügen bleibt verfügbar. Beim Entfernen einer Sitzung werden die Einträge aktualisiert und eine lokale Meldung ausgegeben. Es wird nicht behauptet, dass Teilnehmende benachrichtigt wurden. Die Date-Objekte, das Array der Einträge und die einfache Regel sind im Quellcode sichtbar, damit sie für ein echtes Produkt gezielt ersetzt werden können.

Unterstützende Spezifikation lesen

## React Suite Designsystem – ein fokussierter Eingabedialog mit Validierung

### Ein übersichtlicher Eingabedialog mit Validierung

Beim Öffnen von „Prüfungssitzung hinzufügen“ werden der Titel und alle vorherigen Fehler zurückgesetzt. Das Modal verwendet die Komposition aus Header, Title, Body und Footer; Öffnen und onClose werden durch den Zustand React gesteuert. Das Eingabefeld hat ein korrekt zugeordnetes Label, einen ungültigen Zustand und eine Fehlerbeschreibung. Ist ein Titel nach dem Entfernen führender und nachgestellter Leerzeichen kürzer als drei Zeichen, bleibt das Modal geöffnet und zeigt eine Warnmeldung an.

Beim Absenden eines gültigen Eintrags wird ein Datensatz für das ausgewählte Datum hinzugefügt, das Modal geschlossen und eine Informationsmeldung angezeigt. Die Modal-Komponente übernimmt das Dialogverhalten einschließlich Escape-Taste und Fokusverwaltung. Abbrechen schließt lediglich den Entwurf. Die Anwendung schließt das Modal nicht, bevor sie geprüft hat, ob die eigene Titelregel erfüllt ist.

- Beim Abbrechen wird der nicht gespeicherte Titel verworfen.

- Ein abgelehnter Titel bleibt zur Korrektur erhalten.

- Ein gültiger Titel fügt einen lokalen Datensatz hinzu und aktualisiert die Kalenderanzeige.

Unterstützende Spezifikation lesen

## React Suite-Designsystem: v6-Styles und vollständige Anwendung laden

### v6-Styles und vollständige Anwendung laden

Installieren Sie rsuite@6.2.4 in einem React-Projekt und importieren Sie rsuite/dist/rsuite.min.css. Das App-Beispiel enthält diesen Import, die ursprüngliche style.css und den CustomProvider-Wrapper. Der Einrichtungseinstiegspunkt verwendet React createRoot und ist nicht von einem externen CDN abhängig. Die eigenständige Vorschau bündelt dieselben nativen Komponenten und CSS lokal.

React Suite bietet außerdem eine Stylesheet-Distribution ohne Reset. Dieses Beispiel verwendet bewusst das Standard-Stylesheet. Werden beide Distributionen kombiniert, werden Styles doppelt angewendet und es ist unklar, welcher Reset für die Seite gilt. Wählen Sie in einer bestehenden Anwendung die Distribution, die zur umgebenden Styling-Architektur passt, und prüfen Sie Formulare und Überschriften gemeinsam.

Unterstützende Spezifikation lesen

## React Suite-Designsystem: Ein echter Kalender benötigt zusätzlichen Domänenstatus

### Ein echter Kalender benötigt zusätzlichen domänenspezifischen Zustand

Ein angebundener Terminplaner würde Uhrzeiten, Zeitzonen, Teilnehmende, Berechtigungen und ein Ergebnis der Speicherung benötigen. Dieses Beispiel mit reinen Datumsangaben erfindet solche Felder nicht und gibt auch nicht vor, dass eine erfolgreiche Statusänderung eine Einladung versendet hat. Footer und Hinweise machen den lokalen Umfang deutlich. Die lokale Funktion für Datumsschlüssel eignet sich für diese Datensätze, ist aber keine vollständige Strategie für Besprechungen mit Zeitzonen.

Fügen Sie eine Remote-Anfrage hinzu, lassen Sie das Entwurfsmodal bis zu einer bestätigten Antwort geöffnet oder zeigen Sie einen behebbaren Fehler an. Verhindern Sie doppelte Übermittlungen und behalten Sie Datum und Titel nach einem Fehler bei. Die Bibliothek stellt die Oberflächenbausteine bereit; die Korrektheit der Anwendung hängt davon ab, dass diese Bausteine mit dem tatsächlichen Vorgang verknüpft sind.

Unterstützende Spezifikation lesen

## React Suite-Designsystem: Komponentenbeispiele

### Vollständige Kalender- und Agenda-Anwendung

Gesteuerter Kalender mit Markierungen in Datumszellen, lokalen Datumsschlüsseln und einem Modal zum Hinzufügen von Einträgen.

```
import React,{useState} from 'react';
import {CustomProvider,Calendar,Panel,Button,Modal,Input,Message,Tag} from 'rsuite';
import 'rsuite/dist/rsuite.min.css';
import './style.css';
const key=d=>`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
export default function App(){const[date,setDate]=useState(new Date(2026,9,14)),[open,setOpen]=useState(false),[title,setTitle]=useState(''),[error,setError]=useState(''),[notice,setNotice]=useState(''),[events,setEvents]=useState([{id:1,date:'2026-10-14',title:'Navigation review'},{id:2,date:'2026-10-16',title:'Prototype handoff'}]);const selected=events.filter(e=>e.date===key(date));const weekend=[0,6].includes(date.getDay());function save(){if(title.trim().length<3){setError('Use at least three characters for the session title.');return;}setEvents([...events,{id:Date.now(),date:key(date),title:title.trim()}]);setOpen(false);setNotice('Added to the local calendar only. No invitation was sent.');}
return <CustomProvider><main className='schedule'><header><div><p className='eyebrow'>REACT SUITE / TEAM CADENCE</p><h1>Give the work a place in the week.</h1><p>Select a day to inspect its sessions. Weekend scheduling is disabled in this example.</p></div><Tag color='blue'>Local calendar</Tag></header>{notice&&<Message type='info' closable onClose={()=>setNotice('')}>{notice}</Message>}<div className='schedule-grid'><Panel bordered className='calendar-panel'><Calendar compact bordered isoWeek value={date} onSelect={setDate} renderCell={d=>events.some(e=>e.date===key(d))?<span className='event-dot' aria-label='Has a session'/>:null}/><p className='calendar-legend'><span className='event-dot'/> A date with one or more local sessions</p></Panel><Panel bordered className='agenda-panel'><p className='eyebrow'>{date.toLocaleDateString('en',{weekday:'long'})}</p><h2>{date.toLocaleDateString('en',{month:'long',day:'numeric',year:'numeric'})}</h2>{weekend&&<Message type='warning'>The sample team does not schedule weekend reviews.</Message>}<div className='agenda'>{selected.length?selected.map(e=><article key={e.id}><div><span className='event-kind'>Review session</span><h3>{e.title}</h3></div><Button appearance='subtle' size='sm' aria-label={'Remove '+e.title} onClick={()=>{setEvents(events.filter(x=>x.id!==e.id));setNotice('Removed from the local calendar. No attendee was notified.')}}>Remove</Button></article>):<div className='empty'><h3>No sessions for this day.</h3><p>Choose another date or add a local review session.</p></div>}</div><Button appearance='primary' disabled={weekend} onClick={()=>{setTitle('');setError('');setOpen(true)}}>Add review session</Button></Panel></div><footer>Native React Suite Calendar, Panel, Modal, Input, Message and Button. All dates are local calendar dates; no remote calendar connection.</footer><Modal open={open} onClose={()=>setOpen(false)} size='sm'><Modal.Header><Modal.Title>Add review session</Modal.Title></Modal.Header><Modal.Body><p>For {key(date)}. This adds a record only in the preview.</p><label htmlFor='session-title'>Session title</label><Input id='session-title' value={title} onChange={v=>{setTitle(v);setError('')}} aria-invalid={!!error} aria-describedby='title-error' autoFocus/>{error&&<p id='title-error' role='alert' className='field-error'>{error}</p>}</Modal.Body><Modal.Footer><Button onClick={()=>setOpen(false)} appearance='subtle'>Cancel</Button><Button onClick={save} appearance='primary'>Add locally</Button></Modal.Footer></Modal></main></CustomProvider>}
```

Code-Referenz

- Monatswerte in new Date sind nullbasiert.

- Datumsschlüssel verwenden lokale Kalenderfelder statt einer UTC-Konvertierung.

- Einschränkungen für Wochenenden sind Anwendungsverhalten.

### Responsives Kalenderlayout

Verwendet echte semantische Variablen von React Suite für native Komponenten.

```
body{background:var(--rs-bg-well)}.schedule{max-width:1120px;margin:auto;padding:32px;color:var(--rs-text-primary)}header{display:flex;gap:24px;justify-content:space-between;align-items:start;margin-bottom:24px}h1{font-size:32px;line-height:1.2;letter-spacing:-.03em;max-width:650px;margin:8px 0 16px}h2{font-size:24px;line-height:1.3;margin:8px 0 24px}.eyebrow{font-size:11px;letter-spacing:.11em;font-weight:700;color:var(--rs-text-secondary)}.schedule-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;margin-top:20px}.calendar-panel,.agenda-panel{background:var(--rs-bg-card)}.calendar-panel .rs-panel-body{padding:20px}.event-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rs-primary-500)}.calendar-legend{font-size:12px;color:var(--rs-text-secondary);margin-top:16px}.calendar-legend .event-dot{margin-right:6px}.agenda{margin-bottom:24px}.agenda article{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--rs-border-primary);padding:20px 0}.agenda h3{font-size:17px;line-height:1.3;margin:6px 0}.event-kind{color:var(--rs-text-secondary);font-size:12px}.empty{padding:24px 0;color:var(--rs-text-secondary)}footer{margin-top:24px;font-size:12px;color:var(--rs-text-secondary)}.field-error{color:var(--rs-text-error);font-size:13px;margin-top:8px}label{display:block;margin-bottom:8px;font-weight:600}@media(max-width:760px){.schedule{padding:20px 16px}.schedule-grid{grid-template-columns:1fr}header{flex-direction:column}h1{font-size:28px}.calendar-panel .rs-panel-body{padding:12px}}
```

Code-Referenz

- Die Seitenüberschrift und der Breakpoint bei 760px sind eigene Festlegungen.

## React Suite-Designsystem: Einrichtung des AI-Agenten

### Ausgangspunkt für die Implementierung

Natives Beispiel mit React 19 und React Suite 6.2.4. Es wird kein externer Kalenderdienst verwendet. Die vollständige Anwendung und das Styling sind oben enthalten.

```
// Create the project first:
// npm create vite@latest react-suite-specimen -- --template react
// cd react-suite-specimen && npm install
// In a React project:
// npm install rsuite@6.2.4
// Save the complete App example as App.jsx and the CSS example as style.css.
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(<App/>);
// index.html needs <div id="root"></div> and the Vite module entry.
// App.jsx imports rsuite/dist/rsuite.min.css and wraps CustomProvider.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

### Ein Prompt für dein Projekt

```
Verwenden Sie die Kalender- und Agenda-Komposition von React Suite 6.2.4 mit CustomProvider und dem nativen Stylesheet. Behalten Sie die Auswahl von Wochentagen, das Deaktivieren von Wochenenden und den Modal/Input-Ablauf für einen lokalen Review-Eintrag bei. Speichern Sie das ausgewählte Datum und die Agendatermine im Anwendungsstatus, prüfen Sie die eingegebenen Review-Angaben vor dem Hinzufügen und lassen Sie die Agenda beim Abbrechen unverändert. Behalten Sie das responsive Kalenderlayout und die datumsbezogene Agenda-Ausgabe bei. Erwecken Sie nicht den Eindruck, es werde eine Kalendereinladung versendet oder ein externer Terminplanungsdienst verwendet.
```

## React Suite-Designsystem: Quellen und Umfang

React Suite 6.2.4. Lokaler Kalender mit reinen Datumsangaben, eigener Wochenendregelung und Beispieldatensätzen; keine Einladungen oder externe Terminplanung.

- Schnellstart Einrichtung von Paket und Stylesheet.

- CSS-Variablen Typografie, Farben, Abstände und Radien von v6.

- Kalender Gesteuerte Datumsauswahl und Zellendarstellung API.

- Modal Zusammengesetztes Modal und Fokusverhalten.

- Input Texteingabekomponente.

- CustomProvider Konfiguration von Komponenten auf Providerebene.

## React Suite-Designsystem: Verwandte Ressourcen

### Skeleton

Vergleichen Sie die echten Cerberus-, Mint- und Rose-Themes von Skeleton 5.0.1 an einem vollständigen Leseplatz mit Live-Token-Inspektion, dunklen Oberflächenkombinationen und lokalem, jederzeit umkehrbarem Zustand.

### Tabler

Ein natives Tabler-Projektjournal mit den tatsächlichen Theme-Variablen von Version 1.6, Timeline-Cards, Datagrid-Kontext, Modal-Validierung und einer hellen/dunklen Komposition, die lokale Checkpoints aufnehmen kann.

### Tamagui

Erkunden Sie die tatsächlichen Token-Kategorien von Tamagui v5 und die hellen und dunklen blauen Themes anhand einer vollständigen, mit nativen Komponenten erstellten Gewohnheitentafel mit Validierung, Fortschrittsanzeige und Wiederherstellung bei leerem Zustand.


- [Implementierungsreferenz](https://www.rsuitejs.com/components/calendar/)
- [Quelle](https://www.rsuitejs.com/guide/css-variables/)
- [Quelle](https://www.rsuitejs.com/components/calendar/)
- [Unterstützende Spezifikation lesen](https://www.rsuitejs.com/guide/usage/)
- [Unterstützende Spezifikation lesen](https://www.rsuitejs.com/guide/css-variables/)
- [Unterstützende Spezifikation lesen](https://www.rsuitejs.com/components/calendar/)
- [Unterstützende Spezifikation lesen](https://www.rsuitejs.com/components/modal/)
- [Code-Referenz](https://www.rsuitejs.com/components/calendar/)
- [Code-Referenz](https://www.rsuitejs.com/guide/css-variables/)
- [Schnellstart Einrichtung von Paket und Stylesheet.](https://www.rsuitejs.com/guide/usage/)
- [CSS-Variablen Typografie, Farben, Abstände und Radien von v6.](https://www.rsuitejs.com/guide/css-variables/)
- [Kalender Gesteuerte Datumsauswahl und Zellendarstellung API.](https://www.rsuitejs.com/components/calendar/)
- [Modal Zusammengesetztes Modal und Fokusverhalten.](https://www.rsuitejs.com/components/modal/)
- [Input Texteingabekomponente.](https://www.rsuitejs.com/components/input/)
- [CustomProvider Konfiguration von Komponenten auf Providerebene.](https://www.rsuitejs.com/components/custom-provider/)