Tabs

import { Tabs } from "@soft-ui/react/tabs"

function Example() {
  return (
    <Tabs defaultValue="tab-1">
      <Tabs.List>
        <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
        <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
        <Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Content value="tab-1">Content for tab 1</Tabs.Content>
      <Tabs.Content value="tab-2">Content for tab 2</Tabs.Content>
      <Tabs.Content value="tab-3">Content for tab 3</Tabs.Content>
    </Tabs>
  )
}

import { Tabs } from "@soft-ui/react/tabs"

function Example() {
  return (
    <>
      <Tabs variant="stroke" defaultValue="tab-1">
        <Tabs.List>
          <Tabs.Trigger value="tab-1">Stroke</Tabs.Trigger>
          <Tabs.Indicator />
        </Tabs.List>
      </Tabs>

      <Tabs variant="pill" defaultValue="tab-1">
        <Tabs.List>
          <Tabs.Trigger value="tab-1">Pill</Tabs.Trigger>
          <Tabs.Indicator />
        </Tabs.List>
      </Tabs>

      <Tabs variant="pill-emphasized" defaultValue="tab-1">
        <Tabs.List>
          <Tabs.Trigger value="tab-1">Emphasized</Tabs.Trigger>
          <Tabs.Indicator />
        </Tabs.List>
      </Tabs>
    </>
  )
}

import { Tabs } from "@soft-ui/react/tabs"

function Example() {
  return (
    <>
      <Tabs size="s" defaultValue="tab-1">
        <Tabs.List>
          <Tabs.Trigger value="tab-1">Small</Tabs.Trigger>
          <Tabs.Indicator />
        </Tabs.List>
      </Tabs>

      <Tabs size="m" defaultValue="tab-1">
        <Tabs.List>
          <Tabs.Trigger value="tab-1">Medium</Tabs.Trigger>
          <Tabs.Indicator />
        </Tabs.List>
      </Tabs>
    </>
  )
}

import { Tabs } from "@soft-ui/react/tabs"
import { RiHome5Fill, RiUserFill, RiSettings4Fill } from "@soft-ui/icons"

function Example() {
  return (
    <Tabs defaultValue="home">
      <Tabs.List>
        <Tabs.Trigger value="home" leadingIcon={<RiHome5Fill />}>
          Home
        </Tabs.Trigger>
        <Tabs.Trigger value="profile" leadingIcon={<RiUserFill />}>
          Profile
        </Tabs.Trigger>
        <Tabs.Trigger value="settings" leadingIcon={<RiSettings4Fill />}>
          Settings
        </Tabs.Trigger>
        <Tabs.Indicator />
      </Tabs.List>
    </Tabs>
  )
}