NavigationAdded in Sierra

Liquid Tab

Tab switcher where the active indicator is a squishy, pouring liquid blob.

Liquid Fluid Motion

Active tab switcher indicator that stretches and morphs with organic spring physics as it transitions between tabs.

Active Tab: overview

'use client'

import React, { useState } from 'react'
import { LiquidTab } from 'biibaos'
import { Home, Globe, Settings } from 'lucide-react'

export default function App() {
  const [active, setActive] = useState('overview')
  return (
    <LiquidTab
      tabs={[
        { id: 'overview', label: 'Overview', icon: <Home size={14} /> },
        { id: 'integrations', label: 'Integrations', icon: <Globe size={14} /> },
        { id: 'settings', label: 'Settings', icon: <Settings size={14} /> },
      ]}
      activeId={active}
      onChange={setActive}
    />
  )
}

Sizes & Widths

Configure tabs to take up custom inline spacing or span full container width, and choose between small (sm) and medium (md) sizing.

INLINE & SMALL

FULL WIDTH & MEDIUM

'use client'

import React, { useState } from 'react'
import { LiquidTab, Stack } from 'biibaos'

export default function App() {
  const [active, setActive] = useState('one')
  return (
    <Stack gap={16} align="start">
      {/* Inline Small Tab */}
      <LiquidTab
        size="sm"
        fullWidth={false}
        tabs={[
          { id: 'one', label: 'Overview' },
          { id: 'two', label: 'Settings' },
          { id: 'three', label: 'Logs', disabled: true },
        ]}
        activeId={active}
        onChange={setActive}
      />

      {/* Full Width Medium Tab */}
      <LiquidTab
        size="md"
        fullWidth
        tabs={[
          { id: 'one', label: 'Profile' },
          { id: 'two', label: 'Security' },
          { id: 'three', label: 'Billing' },
        ]}
        activeId={active}
        onChange={setActive}
      />
    </Stack>
  )
}

Properties

Prop	Type	Default	Description
`tabs`	`LiquidTabItem[]`	—	Array of tabs, each with an id, label, optional icon, and optional disabled state.
`activeId`	`string`	—	The id of the currently active tab.
`onChange`	`(id: string) => void`	—	Callback fired when a tab is clicked.
`fullWidth`	`boolean`	true	Whether tabs should distribute and fill the parent width.
`size`	`'sm' \| 'md'`	'md'	Vertical padding size of tabs.

Pagination

Dynamic Island