Release 3.5.0
Intent UI v3.5.0 adds new components, upgrades core dependencies, and introduces clearer, more consistent form APIs.
Introduction
Intent UI v3.5.0 is here. This release adds new components, refines form patterns, and upgrades key dependencies to improve speed, consistency, and accessibility.
New components
Highlights
- Updated to the latest React Aria Components and Tailwind CSS.
Inputprovides a consistent, accessible primitive for form fields.ButtonGrouplets you group related actions with a compact layout.Textstandardizes typography so content looks consistent across your app.
Breaking changes
Form components now use explicit child elements for labels, descriptions, and errors. This improves flexibility and composition.
TextField
Before
<TextField
label="Username"
description="Enter your username"
errorMessage="Username is required"
/>After
<TextField>
<Label>Username</Label>
<Input/>
<Description>Enter your username</Description>
<FieldError>Username is required</FieldError>
</TextField>Textarea
Before
<Textarea
label="Bio"
description="Tell us about yourself"
errorMessage="Bio is required"
/>After
<TextField>
<Label>Bio</Label>
<Description>Tell us about yourself</Description>
<Textarea/>
<FieldError>Bio is required</FieldError>
</TextField>Checkbox
CheckboxLabel replaces using Label inside Checkbox.
<Checkbox>
<CheckboxLabel>Accept terms and conditions</CheckboxLabel>
</Checkbox>Switch
SwitchLabel replaces using Label inside Switch.
Before
<Switch>
<Label>Enable notifications</Label>
</Switch>After
<Switch>
<SwitchLabel>Enable notifications</SwitchLabel>
</Switch>Select
Props for label, description, and errorMessage are removed in favor of child elements.
Before
<Select
label="Country"
description="Select your country"
errorMessage="Country is required"
>
<SelectContent />
</Select>After
<Select>
<Label>Country</Label>
<SelectTrigger />
<SelectContent />
<Description>Select your country</Description>
<FieldError>Country is required</FieldError>
</Select>ComboBox
Same pattern as Select and TextField.
Before
<ComboBox
label="City"
description="Select your city"
errorMessage="City is required"
>
<ComboBoxContent />
</ComboBox>After
<ComboBox>
<Label>City</Label>
<ComboBoxInput />
<ComboBoxContent />
<Description>Select your city</Description>
<FieldError>City is required</FieldError>
</ComboBox>Additional changes
Components that used dot notation like Card.Header and Modal.Footer are now flattened; use CardHeader and ModalFooter instead.
Migration notes
- Replace removed props with
<Label>,<Description>, and<FieldError>children. - Use
CheckboxLabelandSwitchLabelfor their respective components.
Intent UI Design
Intent UI Design has been updated to match the latest components and patterns in this release. Enjoy 35% off all templates and design assets for a limited time. One-time purchase, no subscription.
Support
If you find this work useful, you can sponsor me on GitHub.