Components
Charts
Setting UpArea ChartLine ChartBar ChartPie ChartRadar ChartRadial Bar ChartScatter ChartTooltip ChartColors
Color AreaColor FieldColor PickerColor SliderColor SwatchColor Swatch PickerColor ThumbColor WheelDrag and drop
Drop ZoneForms
CheckboxCheckbox GroupFieldFormInput OTPNumber FieldRadio GroupSearch FieldTag FieldText FieldTextareaUtilities
Visually HiddenTabs
Switch between views like flipping through file folders at a desk, organizing content without clutter.
Basic
Tabs divide content into sections, allowing users to easily switch between them.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Manual Installation
Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.
Anatomy
With Icons
If you want to include icons in your tabs, it's simple to do. This tab setup handles icons smoothly, maintaining a clean design.
Orientation
You can set the orientation of the tabs to either horizontal or vertical.
Collections
Tabs can also be used within collections.
Links
If you want to use tabs as navigational links, you can add the href prop to the Tab component. This will automatically change the cursor to a pointer.
Disabled
You can disable all tabs by setting the isDisabled prop to true.
You can also disable individual tabs by setting the isDisabled prop for each one, like this: