Get started
Actions
Forms
The React Native items, each published for NativeWind and Uniwind in the Vega and Nova styles.
| Item | What it is |
|---|---|
| Theme | The colours, radius and Geist font families, and the map that loads the fonts. |
| Text | Text that takes its container's text classes. |
| Icon | A lucide icon sized and coloured by classes. |
| Button | A pressable control in the style's variants and sizes. |
| Toggle | A two-state button, announced as selected while pressed. |
| Toggle group | Toggles of which one or several are pressed. |
| Label | The text that names a field. |
| Input | A single-line text field. |
| Input group | An input with text, icons or buttons beside it. |
| Input OTP | A one-time code in a row of slots. |
| Password input | A password field whose toggle shows or hides the password. |
| Password strength | A meter and checklist for how strong a password is. |
| Code input | A six-character one-time code in one group of slots or two. |
| Textarea | A multiline text field. |
| Checkbox | A box that is checked or not. |
| Radio group | A set of choices of which one is selected. |
| Switch | An on/off control. |
| Avatar | A round picture with a fallback. |
| Badge | A small pill for a status or a count. |
| Card | A surface that groups related content. |
| Progress | A bar showing how far a task has got. |
| Spinner | A circle that turns while something loads. |
| Unsaved changes toolbar | A floating bar with Reset and Save while a form has unsaved changes. |
| Separator | A rule between groups of content. |
| Skeleton | A placeholder block for loading content. |
| Tabs | Panels switched by a row of triggers. |
| Tab bar | A bar of top-level destinations at one edge of the screen. |
Each component also installs utils, which gives it cn.