# Sistema di progettazione Chakra UI ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Chakra UI Prova la convalida dei campi vuoti, un salvataggio non riuscito simulato, il mantenimento dei dati inseriti, la conferma locale riuscita e il cambio di aspetto. ## Riferimento di progettazione per il sistema di progettazione sistema di design Chakra UI Riferimenti al tema predefinito di Chakra UI 3.37.0, oltre ai token dell’applicazione OpenDesign identificati esplicitamente. I valori rem seguono la dimensione del carattere radice; gli equivalenti in pixel presuppongono 16px. Questo è un riferimento operativo selezionato, non il tema esportato completo. ### Colori semantici predefiniti | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | bg | white / black | Sfondo della pagina in modalità chiara/scura. | | bg.panel | white / gray.950 | Superficie della scheda in modalità chiara/scura. | | bg.subtle | gray.50 / gray.950 | Superficie discreta. | | fg | black / gray.50 | Testo primario. | | fg.muted | gray.600 / gray.400 | Testo di supporto. | | border | gray.200 / gray.800 | Bordo di pannelli e controlli. | | fg.error | red.500 / red.400 | Testo di errore. | | bg.error | red.50 / red.950 | Superficie di errore. | | teal.fg | teal.700 / teal.300 | Testo su una superficie tenue color teal. | | teal.subtle | teal.100 / teal.900 | Stile della fase corrente. | ### Valori primitivi usati in questo esempio | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | gray.50 | #fafafa | Sfondo chiaro. | | gray.200 | #e4e4e7 | Bordo chiaro. | | gray.800 | #27272a | Bordo scuro. | | gray.950 | #111111 | Sfondo scuro. | | teal.700 | #0c5d56 | L’azione personalizzata in modalità chiara usa questo valore come riferimento. | | teal.300 | #5eead4 | L’azione personalizzata in modalità scura usa questo valore come riferimento. | ### Sottoinsieme degli spazi predefiniti | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | spacing.1 | 0.25rem / 4px | Spaziatura verticale dello stato. | | spacing.2 | 0.5rem / 8px | Spazio tra controlli in linea. | | spacing.3 | 0.75rem / 12px | Spazio tra le azioni del gruppo. | | spacing.4 | 1rem / 16px | Spaziatura per viewport ridotti. | | spacing.6 | 1.5rem / 24px | Spazio tra i campi del modulo. | | spacing.8 | 2rem / 32px | Spazio principale del layout. | | spacing.10 | 2.5rem / 40px | Spaziatura maggiore disponibile. | | spacing.12 | 3rem / 48px | Spaziatura disponibile tra le sezioni. | ### Sottoinsieme della tipografia predefinita | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | fonts.body / fonts.heading | Inter, system fallbacks | Il token del carattere non scarica Inter. | | fontSizes.xs | 0.75rem | Annotazione dell’esempio. | | fontSizes.sm | 0.875rem | Testo di supporto. | | fontSizes.md | 1rem | Campi di inserimento e testo normale. | | fontSizes.lg | 1.125rem | Dimensione maggiore disponibile per il testo del corpo. | | fontSizes.xl | 1.25rem | Intestazione della scheda. | | fontSizes.2xl | 1.5rem | Titolo dell’esempio. | | fontWeights.medium / semibold | 500 / 600 | Gerarchia delle etichette. | | lineHeights.shorter / moderate | 1.25 / 1.5 | Ritmo tra titolo e paragrafo. | | letterSpacings.wide | 0.025em | Sopratitolo piccolo. | ### Raggi predefiniti | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | radii.sm | 0.25rem / 4px | Bordo appena arrotondato. | | radii.md | 0.375rem / 6px | Indicatore di stato usato in questo esempio. | | radii.lg | 0.5rem / 8px | Arrotondamento moderato. | | radii.xl | 0.75rem / 12px | Scheda del profilo usata in questo esempio. | | radii.full | 9999px | Forma a pillola, non usata per il modulo. | ### Soglie responsive predefinite | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | sm | 480px | La riga delle azioni può disporsi in orizzontale. | | md | 768px | La colonna di avanzamento si affianca al modulo. | | lg | 1024px | Soglia disponibile per i layout larghi. | | xl | 1280px | Soglia disponibile per desktop. | | 2xl | 1536px | Soglia disponibile per schermi extra-larghi. | ### Token semantici dell’applicazione: definiti di seguito | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | workspace.canvas | gray.50 / gray.950 | Mappatura personalizzata dello sfondo chiaro/scuro. | | workspace.action | brand.700 / brand.300 | Sfondo personalizzato dell’azione; i colori primitivi del brand sono dichiarati in theme.js. | | workspace.onAction | white / gray.950 | Testo personalizzato dell’azione abbinato al relativo sfondo. | ## Guida completa al sistema di progettazione sistema di design Chakra UI Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di progettazione sistema di design Chakra UI: il sistema v3, configurazione, token e componenti ### Crea un sistema invece di passare un vecchio oggetto tema > L’implementazione ha tre livelli: theme.js definisce le scelte di progettazione, main.jsx fornisce il sistema risultante e App.jsx compone il modulo. createSystem(defaultConfig, config) mantiene le ricette dei componenti predefinite unendo la configurazione dell’applicazione. Un sistema personalizzato essenziale richiederebbe altre definizioni; qui si sceglie deliberatamente di estendere i valori predefiniti. L’anteprima usa componenti Chakra, non elementi sostitutivi disegnati a mano. La barra laterale è un elenco ordinato di avanzamento specifico dell’applicazione, non l’affermazione che sia montato il componente Chakra Steps. La scheda del profilo, i campi, il menu di selezione, gli avvisi e i pulsanti sono composizioni Chakra native. Leggi la specifica di supporto ### Che cosa appartiene a ciascun livello - tokens: valori primitivi riutilizzabili, tra cui i due colori del brand usati nell’esempio. - semanticTokens: ruoli dipendenti dal contesto, come workspace.action, indipendenti dalle singole schermate. - recipes: varianti riutilizzabili dei componenti; lo stato dell’applicazione React determina se il modulo non è valido, è in attesa, non è riuscito o è stato confermato. ## Sistema di progettazione sistema di design Chakra UI: colori primitivi e ruoli semantici del tema ### Usa i ruoli quando cambia l’aspetto bg.panel e fg.muted descrivono rispettivamente il ruolo di superficie e quello del testo; gray.950 e gray.400 sono i valori sottostanti. La tabella di riferimento mostra come vengono risolti in modalità chiara e scura. Nella demo, cambiare il documento radice tra modalità chiara e scura attiva quei valori condizionali senza dover modificare ogni Field o Card. Questo selettore locale non prevede volutamente la persistenza né l’integrazione con le preferenze di sistema. I ruoli workspace.* sono aggiunte specifiche dell’applicazione. Definiscono un’azione color teal scuro su una superficie chiara e un’azione color teal chiaro su una superficie scura, con il relativo colore del testo abbinato. Non sono nomi ufficiali dei token Chakra. Mantenere la coppia nel tema evita che, in modalità scura, cambi lo sfondo del pulsante ma l’etichetta rimanga bianca. Leggi la specifica di supporto ### La sintassi di riferimento è diversa dalla forma abbreviata dei componenti Nelle definizioni dei token, usa il riferimento completo {colors.gray.950}. In una proprietà di stile, bg="workspace.canvas" viene risolto nella categoria dei colori. In un valore composito CSS è invece necessario usare di nuovo il percorso completo del token. Questa distinzione evita che una stringa letterale venga scambiata per un riferimento al tema. ``` ``` Riferimento del codice ## Sistema di progettazione sistema di design Chakra UI: una scala tipografica leggibile con token espliciti ### Adatta la scala a questa composizione Il titolo usa fontSize="2xl" e lineHeight="shorter"; l’intestazione della scheda usa xl, il testo di supporto sm e l’annotazione dell’esempio xs. Queste scelte creano una gerarchia senza modificare i livelli semantici delle intestazioni: il titolo della schermata è h1 e il titolo del modulo è h2. Il contenuto normale del modulo mantiene la dimensione predefinita del testo del corpo. La famiglia predefinita per il testo del corpo e le intestazioni di Chakra inizia con Inter e prosegue con i caratteri di sistema. La demo autonoma non effettua richieste di caratteri esterne, quindi il carattere alternativo visualizzato può variare in base al sistema operativo. Se serve una tipografia esatta, servi localmente un carattere con licenza appropriata: impostare un token per il carattere non fornisce i file del carattere. Leggi la specifica di supporto ### Mantieni separati tipografia e significato L’indicatore della fase corrente è un metadato compatto, non l’istruzione principale. I messaggi di obbligatorietà e di errore rimangono accanto al campo e hanno dimensioni leggibili. Modificare la spaziatura tra le lettere del sopratitolo non influisce sulle etichette del modulo; il nome lungo dell’area di lavoro rimane all’interno del campo senza modificare la larghezza della scheda circostante. ## Sistema di progettazione sistema di design Chakra UI: comporre Field, NativeSelect, Card e Alert ### Field è una relazione, non un input stilizzato Field.Root raggruppa l’etichetta, il controllo, il testo di supporto e l’errore. Il flag required e RequiredIndicator comunicano l’obbligatorietà; invalid controlla lo stato di errore. L’esempio mantiene l’input controllato tramite React e inserisce l’errore relativo al nome dell’area di lavoro in Field.ErrorText. Non applica stili di errore in modo indipendente a un paragrafo scollegato. Per la dimensione del team si usano NativeSelect.Root, NativeSelect.Field e NativeSelect.Indicator. In questo modo si mantiene il comportamento nativo del menu di selezione per un insieme ridotto e fisso di opzioni. Non si simula un controllo con risultati remoti ricercabili: quello richiederebbe un controllo e un’interazione con i dati diversi. Leggi la specifica di supporto ### Il feedback ha una composizione distinta Card.Header contiene l’identità del modulo, mentre Card.Body contiene i contenuti modificabili. Alert.Root seleziona lo stato di errore o di successo, Alert.Indicator fornisce l’icona e Alert.Content raggruppa il titolo e la descrizione. L’avviso di salvataggio non riuscito è distinto dalla convalida dei campi, perché il nome dell’area di lavoro può essere valido anche se l’invio simulato non riesce. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Chakra UI: applicare i token di spaziatura e le proprietà di stile responsive ### Una regola di spaziatura concreta Usa gap="6" tra i gruppi di campi, gap="3" tra le azioni e gap="8" tra la colonna di avanzamento e il modulo. La pagina passa da p="4" a p="8" a partire da md. Con una radice da 16px, questi valori corrispondono a 24px, 12px, 32px, 16px e 32px. I valori in rem si adattano alla dimensione del font radice impostata dall’utente. La scheda usa rounded="xl" e l’etichetta di stato rounded="md". I diversi raggi sono intenzionali: il contenitore grande e l’etichetta compatta hanno geometrie diverse. Non considerare queste scelte d’uso come regole predefinite che tutte le applicazioni Chakra devono seguire. Leggi la specifica di supporto ### Modifica la composizione a partire da md La griglia usa una colonna sotto md e, da md in su, una colonna di avanzamento da 220px accanto a un modulo flessibile. minmax(0, 1fr) consente al modulo di ridursi all’interno della griglia. La disposizione delle azioni cambia a partire da sm. Questi valori degli oggetti sono override mobile-first, non rilevamento del dispositivo. ``` … … ``` Riferimento del codice ## Sistema di design Chakra UI: sistema di progettazione per collegare validazione, caricamento e recupero ### La macchina a stati dell’anteprima L’invio di un nome vuoto dopo aver rimosso gli spazi iniziali e finali imposta lo stato su invalid e sposta il focus sull’input. Un invio valido passa allo stato pending, disabilita la modifica e mostra Button loadingText. Al termine del timer locale, la casella di controllo dell’errore determina se la dimostrazione mostra lo stato failed o complete. Nessuno dei due rami invia una richiesta di rete o salva dati. Un risultato failed mantiene il nome controllato e la dimensione selezionata. Disattivare la simulazione dell’errore consente di riprovare. Il completamento disabilita i campi del profilo e modifica la prima etichetta di avanzamento; Reset torna alla modifica. Questo dimostra la composizione degli stati visibili, non garantisce un contratto di salvataggio lato backend. Leggi la specifica di supporto ### Prova gli stati in ordine 1. Reimposta il modulo e invialo senza un nome; controlla il messaggio del campo e l’input con il focus. 2. Inserisci un nome, attiva la simulazione del salvataggio non riuscito e invia; verifica che i valori restino dopo l’errore. 3. Disattiva la simulazione dell’errore e invia di nuovo; controlla il riepilogo di conferma, poi modifica l’aspetto. ## Sistema di design Chakra UI: sistema di progettazione per mantenere la semantica nativa nella composizione ### Validazione e avanzamento restano comprensibili Il modulo usa noValidate affinché questo esempio possa mostrare il proprio percorso di errore tramite Field, invece di fermarsi all’interfaccia di validazione del browser. L’etichetta resta associata tramite Field e il primo input non valido riceve il focus. Il lavoro in corso è descritto da un’area di stato live; non viene comunicato solo tramite un indicatore di caricamento. L’elenco di avanzamento usa la semantica di un elenco ordinato e aria-current="step" sull’elemento attivo. Non include collegamenti fittizi a schermate non disponibili. Il secondo e il terzo passaggio dell’anteprima forniscono un contesto, ma non sono selezionabili. In questo modo i limiti della dimostrazione sono chiari. Leggi la specifica di supporto ### Il focus fa parte della configurazione personalizzata dell’azione La variante di onboarding definisce esplicitamente il contorno focus-visible e il relativo offset. L’aspetto scuro modifica il ruolo del contorno insieme al ruolo dell’azione. La casella di controllo e il selettore nativi restano utilizzabili da tastiera. Verifica anche il focus, gli annunci dei campi, lo zoom e l’output dello screen reader nell’applicazione che li integra: un esempio a livello di componente non può dimostrare l’accessibilità di un intero prodotto di onboarding. ## Sistema di design Chakra UI: sistema di progettazione, configurazione del provider e limiti di versione ### Estendi Button; definisci Status localmente La variante Button per l’onboarding viene aggiunta in theme.recipes.button. Le varianti esistenti, come outline, restano disponibili perché la configurazione estende defaultConfig. L’etichetta di stato usa localmente defineRecipe e useRecipe: le sue varianti di stato associano current, complete e waiting a ruoli semantici diversi. È un componente dell’applicazione, non un’esportazione di Chakra. Una recipe per un singolo elemento restituisce un unico oggetto di stile. I componenti composti da più parti, come Field, hanno diversi slot e richiedono recipe per slot quando si tematizzano insieme le loro parti. Applicare a un intero Field una recipe simile a quella di un pulsante non consentirebbe di controllare separatamente l’etichetta, il controllo e l’errore. Leggi la specifica di supporto ### Usa insieme i file forniti Crea il progetto Vite React con i comandi di configurazione, sostituisci i moduli predefiniti App e main con gli esempi seguenti e aggiungi theme.js. L’esempio JSX usa JavaScript, così i nomi personalizzati dei token e delle varianti non richiedono dichiarazioni TypeScript generate. Un adattamento di TypeScript dovrebbe eseguire Chakra CLI typegen sul file del tema. Non importare una configurazione v2 con extendTheme né passare theme={...} a questo provider v3. La radice effettiva usa ChakraProvider value={system}. Per scelta, l’esempio non aggiunge un secondo provider per la modalità colore: il selettore locale di classe chiara/scura è sufficiente per questa anteprima isolata, mentre un’app reale potrebbe richiedere il salvataggio delle preferenze e il supporto al rendering lato server. Leggi la specifica di supporto ## Sistema di design Chakra UI: sistema di progettazione per verificare insieme tema e modulo ### Cosa dimostra questo esempio L’unità di revisione significativa è l’intera scheda del profilo in entrambe le modalità: etichetta, input, testo di aiuto, feedback di errore, pulsante in caricamento, avviso di errore e riepilogo di conferma. Un singolo pulsante non può mettere in evidenza uno sfondo semantico mancante o un controllo il cui stato di errore non è associato alla relativa etichetta. Confronta la tabella di riferimento con l’interfaccia calcolata. L’azione personalizzata color teal dovrebbe essere diversa dall’azione outline predefinita; la spaziatura 6 dovrebbe separare i campi; sotto md la griglia dovrebbe passare a una colonna. Queste verifiche collegano le regole scritte al risultato visualizzato. ### Cosa non è incluso nell’esempio L’anteprima non include la creazione di account, l’invio di inviti, la persistenza, l’autenticazione o l’integrazione con un’altra schermata di onboarding. Il timer è esplicitamente una simulazione. Quando colleghi un endpoint reale, mantieni la distinzione mostrata tra lo stato del campo e quello della richiesta, sostituisci il timer con la richiesta e definisci se il completamento significa accettazione locale, salvataggio remoto o attivazione completa. ## Esempi di componenti del sistema di progettazione sistema di design Chakra UI ### theme.js — token primitivi, ruoli semantici e recipe Tema completo dell’applicazione per l’esempio. I ruoli dell’area di lavoro e la variante di onboarding sono aggiunte originali; defaultConfig fornisce il tema standard di Chakra. ``` import { createSystem, defaultConfig, defineConfig, defineRecipe } from '@chakra-ui/react'; export const statusRecipe = defineRecipe({ base: { display: 'inline-flex', px: '2', py: '1', rounded: 'md', fontSize: 'xs', fontWeight: 'semibold' }, variants: { state: { current: { bg: 'teal.subtle', color: 'teal.fg' }, complete: { bg: 'bg.success', color: 'fg.success' }, waiting: { bg: 'bg.muted', color: 'fg.muted' }, }, }, defaultVariants: { state: 'waiting' }, }); const config = defineConfig({ theme: { tokens: { colors: { brand: { 700: { value: '#0c5d56' }, 300: { value: '#5eead4' } } } }, semanticTokens: { colors: { 'workspace.canvas': { value: { base: '{colors.gray.50}', _dark: '{colors.gray.950}' } }, 'workspace.action': { value: { base: '{colors.brand.700}', _dark: '{colors.brand.300}' } }, 'workspace.onAction': { value: { base: '{colors.white}', _dark: '{colors.gray.950}' } }, } }, recipes: { button: defineRecipe({ variants: { variant: { onboarding: { bg: 'workspace.action', color: 'workspace.onAction', _hover: { opacity: 0.9 }, _focusVisible: { outline: '2px solid', outlineColor: 'workspace.action', outlineOffset: '2px' }, }, } } }), }, }, }); export const system = createSystem(defaultConfig, config); ``` Riferimento del codice - I valori del brand corrispondono intenzionalmente ai token primitivi teal di riferimento. - La recipe di stato è locale; la variante Button è registrata nel sistema. ### App.jsx — esempio completo di modulo nativo e gestione degli stati La composizione effettiva di React usata nell’anteprima. Include il cambio di tema, la validazione Field, un selettore nativo, il feedback di caricamento, la simulazione dell’errore, la conferma e il ripristino. ``` import React, { useEffect, useRef, useState } from 'react'; import { Box, Button, Card, Field, Grid, Heading, Input, NativeSelect, Stack, Text, Alert, chakra, useRecipe } from '@chakra-ui/react'; import { statusRecipe } from './theme'; function Status({ state, children }) { const recipe = useRecipe({ recipe: statusRecipe }); return {children}; } export default function App() { const [dark, setDark] = useState(false); useEffect(() => { document.documentElement.className = dark ? 'dark' : 'light'; }, [dark]); const [name, setName] = useState('Northstar Studio'); const [size, setSize] = useState('2–10'); const [invalid, setInvalid] = useState(false); const [phase, setPhase] = useState('editing'); const [simulateFailure, setSimulateFailure] = useState(false); const nameInput = useRef(null); const pending = phase === 'pending'; const complete = phase === 'complete'; const save = (event) => { event.preventDefault(); if (!name.trim()) { setInvalid(true); nameInput.current?.focus(); return; } setInvalid(false); setPhase('pending'); window.setTimeout(() => setPhase(simulateFailure ? 'failed' : 'complete'), 600); }; return CHAKRA UI · NATIVE SPECIMENSet up your workspace {complete ? 'Complete' : 'Current'}1. Workspace profileName and team size Next2. Invite your teamAvailable in the full product Optional3. Connect toolsComplete this later Scale in this specimenField gap 6 · Card padding 6
Page gap 8 · Radius xl Workspace profileThe name appears on your team's workspace.
Workspace name {setName(e.target.value);setInvalid(false);}} autoComplete='organization' /> Use a name your teammates will recognize. Enter a workspace name. Team size setSize(e.target.value)}> Used only for this local preview summary. {phase === 'failed' && Demo save failedYour values are still here. Turn off failure simulation and retry.} {complete && Profile confirmed in this preview{name.trim()} · {size} people. Nothing was sent or stored.} {pending ? 'Simulating a response. No network request is made.' : complete ? 'Profile step complete. Reset to try another state.' : 'Try an empty name, a failed save, or a different appearance.'}
Actual Chakra UI 3.37.0 components. Custom workspace semantic tokens and button recipe. Memory-only demonstration. ; } ``` Riferimento del codice - Non viene inviata alcuna richiesta; il ritardo di 600ms mostra l’interfaccia di caricamento. - I passaggi successivi sono etichette contestuali, non elementi di navigazione funzionanti. ## Configurazione dell’agente AI per il sistema di progettazione sistema di design Chakra UI ### Punto di partenza per l’implementazione Usa una versione di Node.js supportata dalla versione di Vite e Chakra installata (Chakra documenta Node 20 o versioni successive). Questo blocco separa i comandi del terminale da src/main.jsx. I file completi del tema e App sono riportati sopra; non servono frammenti nascosti del provider né CSS esterni. ``` # Terminal: create a JavaScript React application npm create vite@latest chakra-profile -- --template react cd chakra-profile npm install npm install @chakra-ui/react@3.37.0 @emotion/react # Save the two complete examples as src/theme.js and src/App.jsx. # Replace src/main.jsx with: import React from 'react'; import { createRoot } from 'react-dom/client'; import { ChakraProvider } from '@chakra-ui/react'; import { system } from './theme'; import App from './App'; createRoot(document.getElementById('root')).render(); # Start from the project directory: npm run dev ``` ### Un prompt per il tuo progetto ``` Usa Chakra UI 3.37.0 e i file theme.js e App.jsx forniti come punto di partenza. Mantieni i ruoli semantici dell’area di lavoro, la composizione Field, il selettore nativo e la distinzione tra input non valido e invio non riuscito. Sostituisci solo il timer simulato con la nostra API di persistenza effettiva; non contrassegnare il profilo come completato prima di aver ricevuto conferma. Mantieni il focus da tastiera, il layout responsive base/md e i valori per la modalità chiara/scura. Spiega eventuali nuovi token o varianti di recipe. ``` ## Fonti e ambito del sistema di progettazione sistema di design Chakra UI Guida all’implementazione originale di OpenDesign, basata sulle fondamenta documentate di Chakra UI v3. I riferimenti ai token predefiniti sono separati dai ruoli specifici dell’area di lavoro dell’applicazione. L’anteprima nativa dimostra gli stati locali; non salva i dati dell’area di lavoro né implementa l’intero percorso di onboarding. - Architettura Riferimento ufficiale di Chakra UI per l’architettura. - Token Riferimento ufficiale di Chakra UI per i token. - Semantica Riferimento ufficiale di Chakra UI per la semantica. - Colori Riferimento ufficiale di Chakra UI per i colori. - Spaziatura Riferimento ufficiale di Chakra UI per la spaziatura. - Tipografia Riferimento ufficiale di Chakra UI per la tipografia. - Raggi Riferimento ufficiale di Chakra UI per i raggi. - Breakpoint Riferimento ufficiale di Chakra UI per i breakpoint. - Recipe Riferimento ufficiale di Chakra UI per le recipe. - Recipe personalizzate Riferimento ufficiale di Chakra UI per le recipe personalizzate. - Field Riferimento ufficiale di Chakra UI per Field. - Button Riferimento ufficiale di Chakra UI per Button. - Card Riferimento ufficiale di Chakra UI per Card. - Selettore nativo Riferimento ufficiale di Chakra UI per il selettore nativo. - Alert Riferimento ufficiale di Chakra UI per gli avvisi. - Responsive Riferimento ufficiale di Chakra UI per il responsive. - Installazione Riferimento ufficiale di Chakra UI per l’installazione. ## Risorse correlate al sistema di progettazione sistema di design Chakra UI ### CoreUI Una coda di revisione CoreUI realizzata con le variabili reali del tema 5.9, schede native, selezione multipla tramite caselle di controllo e un toast persistente che consente di annullare l’ultima archiviazione locale. ### daisyUI Uno strumento nativo per CSS dedicato alla creazione di inviti, che mostra i 5 temi semantici di daisyUI, i colori coordinati per i contenuti, gruppi di pulsanti radio, controlli a intervallo, convalida del browser e un vero passaggio di revisione in una finestra di dialogo. ### Element Plus Usa il modello Transfer, i filtri e le opzioni disabilitate effettivi di Element Plus per creare un ambiente di lavoro per la selezione dei moduli, con colori, dimensioni tipografiche e dimensioni dei controlli verificati. - [Riferimento per l’implementazione](https://chakra-ui.com/docs/components/field) - [Fonte](https://chakra-ui.com/docs/theming/colors) - [Fonte](https://chakra-ui.com/docs/theming/spacing) - [Fonte](https://chakra-ui.com/docs/theming/typography) - [Fonte](https://chakra-ui.com/docs/theming/radii) - [Fonte](https://chakra-ui.com/docs/theming/breakpoints) - [Fonte](https://chakra-ui.com/docs/theming/semantic-tokens) - [Leggi la specifica di supporto](https://chakra-ui.com/docs/theming/overview) - [Leggi la specifica di supporto](https://chakra-ui.com/docs/theming/semantic-tokens) - [Riferimento del codice](https://chakra-ui.com/docs/theming/tokens) - [Leggi la specifica di supporto](https://chakra-ui.com/docs/theming/typography) - [Leggi la specifica di supporto](https://chakra-ui.com/docs/components/field) - [Leggi la specifica di supporto](https://chakra-ui.com/docs/components/alert) - [Leggi la specifica di supporto](https://chakra-ui.com/docs/theming/spacing) - [Riferimento del codice](https://chakra-ui.com/docs/styling/responsive-design) - [Leggi la specifica di supporto](https://chakra-ui.com/docs/components/button) - [Leggi la specifica di supporto](https://chakra-ui.com/docs/theming/recipes) - [Riferimento del codice](https://chakra-ui.com/docs/theming/overview) - [Riferimento del codice](https://chakra-ui.com/docs/components/field) - [Architettura Riferimento ufficiale di Chakra UI per l’architettura.](https://chakra-ui.com/docs/theming/overview) - [Token Riferimento ufficiale di Chakra UI per i token.](https://chakra-ui.com/docs/theming/tokens) - [Semantica Riferimento ufficiale di Chakra UI per la semantica.](https://chakra-ui.com/docs/theming/semantic-tokens) - [Colori Riferimento ufficiale di Chakra UI per i colori.](https://chakra-ui.com/docs/theming/colors) - [Spaziatura Riferimento ufficiale di Chakra UI per la spaziatura.](https://chakra-ui.com/docs/theming/spacing) - [Tipografia Riferimento ufficiale di Chakra UI per la tipografia.](https://chakra-ui.com/docs/theming/typography) - [Raggi Riferimento ufficiale di Chakra UI per i raggi.](https://chakra-ui.com/docs/theming/radii) - [Breakpoint Riferimento ufficiale di Chakra UI per i breakpoint.](https://chakra-ui.com/docs/theming/breakpoints) - [Recipe Riferimento ufficiale di Chakra UI per le recipe.](https://chakra-ui.com/docs/theming/recipes) - [Recipe personalizzate Riferimento ufficiale di Chakra UI per le recipe personalizzate.](https://chakra-ui.com/docs/theming/customization/recipes) - [Field Riferimento ufficiale di Chakra UI per Field.](https://chakra-ui.com/docs/components/field) - [Button Riferimento ufficiale di Chakra UI per Button.](https://chakra-ui.com/docs/components/button) - [Card Riferimento ufficiale di Chakra UI per Card.](https://chakra-ui.com/docs/components/card) - [Selettore nativo Riferimento ufficiale di Chakra UI per il selettore nativo.](https://chakra-ui.com/docs/components/native-select) - [Alert Riferimento ufficiale di Chakra UI per gli avvisi.](https://chakra-ui.com/docs/components/alert) - [Responsive Riferimento ufficiale di Chakra UI per il responsive.](https://chakra-ui.com/docs/styling/responsive-design) - [Installazione Riferimento ufficiale di Chakra UI per l’installazione.](https://chakra-ui.com/docs/get-started/installation)