Tabs
A Tabs component built with Radix UI, with additional features such as persistent and shared value.
Hello World in Javascript
Value is shared! Try refresh and see if the value is persisted
Usage
Import it in your MDX documents.
Shared Value
By passing an id
property, you can share a value across all tabs with the same
id.
Persistent
You can enable persistent by passing a persist
property. The value will be
stored in localStorage
, with its id as the key.
Persistent only works if you have passed an id
.
Default Value
Set a default value by passing defaultIndex
.
Link to Tab
Use HTML id
attribute to link to a specific tab.
You can add the hash #tab-cpp
to your URL and reload, the C++ tab will be activated.
Javascript is weird
Advanced
You can use the styled Radix UI primitive directly from exported Primitive
.
Edit on GitHub
Last updated on