Rafi Wirana

Design Engineer

Preview

Work in Progress: This installation guide is still being refined. Some documentation may be incomplete.

Back to philosophy

Copy link

Neat Tab

Seamless tabs with animated indicator and smooth transitions. Available in default and pill variants.

Neat Tab

Seamless tabs with animated indicator and smooth transitions.

Default

Pill

Installation

✨ No external dependencies required

Component location

components/craft/NeatTab/index.tsx

Usage

Basic example

import { NeatTab } from '@/components/craft/NeatTab';

export function Example() {
  return (
    <NeatTab
      tabs={[
        { label: "Home" },
        { label: "Projects" },
        { label: "About" },
      ]}
      defaultTab={0}
      onChange={(index) => console.log("Tab changed:", index)}
    />
  );
}

More Examples

Basic Usage

Simple tab navigation with default styling

<NeatTab
  tabs={[
    { label: "Overview" },
    { label: "Features" },
    { label: "Pricing" },
  ]}
/>

Pill Variant

Rounded pill-style tabs

<NeatTab
  variant="pill"
  tabs={[
    { label: "Home" },
    { label: "Projects" },
    { label: "Blog" },
    { label: "About" },
  ]}
/>

With Icons

Use React nodes for custom tab labels

<NeatTab
  tabs={[
    { 
      label: (
        <span className="flex items-center gap-2">
          <Home className="h-4 w-4" />
          Home
        </span>
      ) 
    },
    { 
      label: (
        <span className="flex items-center gap-2">
          <Settings className="h-4 w-4" />
          Settings
        </span>
      ) 
    },
  ]}
/>

Controlled Selection

Track which tab is selected

const [activeTab, setActiveTab] = useState(0);

<NeatTab
  tabs={tabs}
  defaultTab={activeTab}
  onChange={setActiveTab}
/>

<p>Active tab: {activeTab}</p>

Default Selected

Start with a specific tab selected (0-indexed)

<NeatTab
  tabs={tabs}
  defaultTab={2}
/>

Custom Styling

Apply custom classes to the container

<NeatTab
  variant="pill"
  className="bg-zinc-100 dark:bg-zinc-800 p-2 rounded-full"
  tabs={tabs}
/>

API Reference

Prop	Type	Default	Description
`tabs`Required	`TabItem[]`	—	Array of tab items. Each item has a label (string or ReactNode) and optional content.
`defaultTab`	`number`	`0`	Index of the initially active tab (0-indexed)
`variant`	`"default" \| "pill"`	`"default"`	Visual style variant. "default" for structured tabs, "pill" for rounded tabs.
`className`	`string`	—	Additional CSS classes for the root container
`onChange`	`(index: number) => void`	—	Callback fired when the active tab changes. Receives the new tab index.