Pikas UI

@pikas-ui/tabs

This package contains a tabs component that can be used to switch between different views.

This library is based on Radix Ui.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/tabs

yarn add @pikas-ui/tabs

pnpm add @pikas-ui/tabs

Usage

Tabs

This component is used to create a tabs component.

Tab 1 content

import { Tabs } from '@pikas-ui/tabs';

const Example: React.FC = () => {
  return (
    <Tabs
      items={[
        {
          content: 'Tab 1 content',
          trigger: 'Tab 1',
          id: 'tab1',
        },
        {
          content: 'Tab 2 content',
          trigger: 'Tab 2',
          id: 'tab2',
        },
        {
          content: 'Tab 3 content',
          trigger: 'Tab 3',
          id: 'tab3',
          disabled: true,
        },
      ]}
      defaultValue="tab1"
    />
  );
};

Props

Prop	Description	Type	Default
`items`	Array of tabs items	`TabsItem[]`	-
`defaultValue`	Default value of the tabs	`string`	-
`value`	Value of the tabs	`string`	-
`onValueChange`	Callback function that is called when the value of the tabs changes	`(value: string) => void`	-
`orientation`	Orientation of the tabs	`TabsOrientation`	`vertical`
`direction`	Direction of the tabs	`TabsDirection`	`ltr`
`activationMode`	Activation mode of the tabs	`TabsActivationMode`	-
`loop`	Whether the tabs should loop	`boolean`	-
`css`	Custom css	`TabsCSS`	-
`padding`	Padding of the tabs	`TabsPadding`	`{ trigger: 'md', content: 'md' }`
`alignmentTrigger`	Alignment of the trigger	`TabsAlignmentTrigger`	`stretch`
`startTrigger`	Start custom element of the trigger	`ReactNode`	-
`endTrigger`	End custom element of the trigger	`ReactNode`	-

Contributing

This documentation can be edited on GitHub here