Tabs
The Tab component assists in organizing groups of content. This can be especially helpful for landing pages.
Use
- Install the @cebus/react-tabs component.
Using NPM
npm install @cebus/react-tabs
Using Yarn
yarn add @cebus/react-tabs
-
Install the @cebus/react-provider and our theme tokens from @cebus/react-theme
-
Set up the provider in your app:
import { Provider } from '@cebus/react-provider'
import { webLightTheme } from '@cebus/react-theme'
const MyApp = () => {
return (
<Provider theme={webLightTheme}>
<Provider>
)
}
- Integrate the Tab component.
import { Provider } from '@cebus/react-provider'
import { webLightTheme } from '@cebus/react-theme'
import { TabList, Tab } from '@cebus/react-tabs'
const MyApp = () => {
return (
<Provider theme={webLightTheme}>
<TabList>
<Tab value="1">First Tab</Tab>
<Tab value="2">Second Tab</Tab>
</TabList>
<Provider>
)
}
API
The Tab API extends off of FluentUI.