@bd-ui/tabs v1.0.0-rc.1

@bd-ui/tabs

A customizable tabs component library for React, designed to create responsive and accessible tabbed interfaces effortlessly.

Before using this component you must installed and configure @bd-ui/theme

Installation

npm i @bd-ui/tabs
# or
pnpm add @bd-ui/tabs
# or
yarn add @bd-ui/tabs

If this is the first time you are installing a @bd-ui component use follwoing

npx install-peerdeps @bd-ui/tabs
# or
npx install-peerdeps @bd-ui/tabs --pnpm
# or
npx install-peerdeps @bd-ui/tabs --yarn

Or you can manually install following peer dependencies

npm i motion

npm i react-aria-components

Example

<Tabs
  placement="top"
  color="secondary"
  variant="underline"
  fullWidth
  className="w-[32rem]"
>
  <TabList aria-label="bd-ui/tabs">
    <Tab id="tab-1">Header - 1</Tab>
    <Tab id="tab-2">Header - 2</Tab>
    <Tab id="tab-3">Header - 3</Tab>
  </TabList>
  <TabPanel id="tab-1">
    Content - 1: Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </TabPanel>
  <TabPanel id="tab-2">
    <div className="text-red-500">
      Content - 2: Lorem ipsum adipisci nulla laborum cupiditate inventore a
      eligendi?
    </div>
  </TabPanel>
  <TabPanel id="tab-3">
    Content - 3: Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  </TabPanel>
</Tabs>

License

MIT