Label
- Anatomy
- Native label · stable copy · state meta
- Core API
required, optional, disabled, readOnly, meta- Use it well
- Use a visible label for every editable control. Keep instructions in a description.
Gummy UI documentation
Install source you can understand.
The registry copies readable React, TypeScript, and CSS into your project. All 57 public categories use native or Base UI behavior, with Radix UI counterparts for all 22 applicable families; Gummy UI owns material anatomy and motion.
01 · Installation
Add the base and one component.
Start with the semantic theme and canonical Button in a clean shadcn-compatible application. Every other component declares its shared styles and component dependencies automatically.
npx shadcn@latest add https://gummyui.dev/r/gummy-base.json https://gummyui.dev/r/gummy-button.jsonNo runtime package lock-in.The generated files live in your application and can be changed normally.
02 · Theme architecture
Semantic tokens, fruit families.
Components use stable semantic canvas, surface, ink, focus, and fruit variables. Dark mode changes the environment while keeping material identities intact.
Canvas
--canvasRaspberry
--fruit-raspberry-coreGrape
--fruit-grape-coreLime
--fruit-lime-coreTangerine
--fruit-tangerine-coreAqua
--fruit-aqua-core03 · Public catalogue
57 categories, one manifest.
The searchable index, detail routes, install commands, registry URLs, machine-readable API, sitemap, and agent index all derive from the same catalogue source.
Explore by task.Browse the component catalogue, tune theme tokens, verify RTL behavior, or inspect the registry index.
04 · Stage 3 group 01
Calm forms, connected material.
These components use native browser semantics wherever possible. Labels, descriptions, validation messages, and editing content stay optically stable; the connected gel edge communicates hierarchy, focus, selection, success, and error.
68 / 140
Field
- Anatomy
- Root · Label · connected shell · control · messages
- Core API
label, description, errorMessage, successMessage, orientation, density- Use it well
- Use for one native or custom control when Field should compose all accessibility IDs.
Textarea
- Anatomy
- Label · stable multiline plane · attached pool · support row
- Core API
label, resize, showCount, description, errorMessage, successMessage- Use it well
- Use for genuinely multiline input. Set a maximum length only when the product has a real limit.
Checkbox
- Anatomy
- Native input · 44px target · indicator · copy · feedback
- Core API
label, description, indeterminate, readOnly, onCheckedChange- Use it well
- Use for independent choices. Use Switch for immediate settings and Radio Group for one-of-many choices.
Radio Group
- Anatomy
- Fieldset · legend · group description · native radio items · feedback
- Core API
value, defaultValue, onValueChange, orientation, required, readOnly- Use it well
- Use when every option should remain visible and exactly one choice is expected.
Native Select
- Anatomy
- Label · native select · attached chevron reservoir · feedback
- Core API
label, description, errorMessage, successMessage, readOnly- Use it well
- Use for compact platform-native picking. Use a custom Select only when richer option content is necessary.
Accessibility contract.Visible labels and descriptions are associated by ID; validation uses aria-invalid and alert text; disabled states stay native; read-only Checkbox, Radio Group, and Native Select remain focusable but cannot change; focus is internal and non-colour-only.
States and input methods.Default, hover, focus, active or checked, mixed, validation, success, disabled, read-only, dense, RTL, dark theme, touch, and reduced-motion specimens are all available in the Component Lab.
05 · Material benchmark
Canonical Button.
The Button preserves stable text while the gel body expands, compresses, and rebounds. Every visual size keeps a minimum 44px touch target.
1Root
Native button semantics and disabled state.
2Gel body
Material, highlight, thickness, and press physics.
3Stable content
Readable label and loading cue above the optical layer.
06 · Repeatable quality bar
Every component ships as a system.
Highlights follow geometry. Reservoirs grow from the same body; decorative blobs do not float nearby.
Keyboard, pointer, touch, disabled, loading, and reduced-motion paths are designed together.
Native semantics, visible focus, readable contrast, and automated axe checks are release requirements.
Content stays stable while flexible spans—not reservoirs—absorb width changes.
Unit tests, rendered checks, type checking, lint, production build, and visual audits all pass.
07 · Contribution contract
Keep the behavior boring. Make the material excellent.
Start from the native element or Base UI primitive, document public anatomy, use shared tokens, keep decoration hidden from assistive technology, and prove every state in the Component Lab before adding a registry entry.