Aki UI

Smooth Tab

スムースタブ

Tabs with a panel attached — where Expandable Tabs is a nav that only changes its own shape, this one carries the content and slides it. The panel enters from whichever side you came from, since the direction is the sign of the index difference, and the indicator is measured from the selected button with getBoundingClientRect↗↗ rather than sized in CSS, so tabs can be any width and it still lands on them. Full tablist semantics↗↗: one tab stop, arrow keys and Home/End to move, aria-selected and a panel labelled by its tab. The per-tab accent colours and the decorative waveform of the original are dropped. Adapted from Kokonut UI↗↗ under the MIT licence.

Models

Pick the model a request is routed to, per workspace.

Installation

Copy and paste the following code into a new component file:1

"use client"

/**

* Adapted for Aki UI from Kokonut UI's Smooth Tab.

* Original author: @dorianbaffier — https://kokonutui.com

* https://github.com/kokonut-labs/kokonutui

* Reworked here onto the local palette, with the per-tab accent colours and the

* decorative waveform dropped, arrow-key navigation added and motion/react

How to use it2

"use client"

import { SmoothTab } from "@/components/ui/smooth-tab"

const items = [

{ id: "models", title: "Models", description: "Pick the model a request is routed to." },

{ id: "agents", title: "Agents", description: "A model, a toolset and a system prompt." },

]

export default function Page() {

Props

SmoothTab

Name	Default	Description
items	—	SmoothTabItem[] Tabs in the order they appear
defaultId	first item	string Which tab starts selected
width	420	number Width of the panel and the tab rail in pixels
onChange	—	(id: string) => void Fired when the selection changes
dark	false	boolean Render the dark palette

SmoothTabItem

Name	Default	Description
id	—	string Unique key, also used for the tab and panel ids
title	—	string Label on the tab
description	—	string Body of the default panel
content	—	ReactNode Replaces the default panel entirely