# Tabs

Switches between views of one subject in place.

Source page: https://sproutboat.com/ikada/components/tabs

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/tabs.json
```
Or from the package: `import { Tabs, TabsList, TabsTab, TabsPanel } from "@sproutboat/ikada";`
## Usage
```tsx
import { Tabs, TabsList, TabsTab, TabsPanel } from "@/components/ikada/tabs";

<Tabs defaultValue="logs">
  <TabsList>
    <TabsTab value="overview">Overview</TabsTab>
    <TabsTab value="logs">Logs</TabsTab>
    <TabsTab value="settings">Settings</TabsTab>
  </TabsList>
  <TabsPanel value="overview">robin is live in eu-west.</TabsPanel>
  <TabsPanel value="logs">No errors in the last hour.</TabsPanel>
  <TabsPanel value="settings">Region, domain and environment variables.</TabsPanel>
</Tabs>
```
## Examples
### With panels
Switches between views of one subject in place. A raised pebble slides to the active tab.
```tsx
<Tabs defaultValue="logs">
  <TabsList>
    <TabsTab value="overview">Overview</TabsTab>
    <TabsTab value="logs">Logs</TabsTab>
    <TabsTab value="settings">Settings</TabsTab>
  </TabsList>
  <TabsPanel value="overview">robin is live in eu-west.</TabsPanel>
  <TabsPanel value="logs">No errors in the last hour.</TabsPanel>
  <TabsPanel value="settings">Region, domain and environment variables.</TabsPanel>
</Tabs>
```
### Disabled tab

```tsx
<Tabs defaultValue="overview">
  <TabsList>
    <TabsTab value="overview">Overview</TabsTab>
    <TabsTab value="logs">Logs</TabsTab>
    <TabsTab value="metrics" disabled>
      Metrics
    </TabsTab>
  </TabsList>
  <TabsPanel value="overview">wren is live in us-east.</TabsPanel>
  <TabsPanel value="logs">No errors in the last hour.</TabsPanel>
</Tabs>
```
## Props
### TabsProps

| Prop | Type | Description |
| --- | --- | --- |
| style? | `CSSProperties \| ((state: TabsRootState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsRootState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
### TabsListProps

| Prop | Type | Description |
| --- | --- | --- |
| style? | `CSSProperties \| ((state: TabsListState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsListState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
### TabsTabProps

| Prop | Type | Description |
| --- | --- | --- |
| style? | `CSSProperties \| ((state: TabsTabState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsTabState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
### TabsPanelProps

| Prop | Type | Description |
| --- | --- | --- |
| style? | `CSSProperties \| ((state: TabsPanelState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsPanelState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/tabs.tsx