Liquid Tab Bar

New

A floating glass tab bar with a lens that slides between tabs

$ npx @hritik-sharmaa/repeat-ui add commons-liquid-tab-bar
Category
Commons
Added
Nov 3, 2026
Version
1.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview

Scroll the feed under the bar

Home

Customize
76px
64px
40
0.15
2px
1.6
0.7
0.1
import CommonsLiquidTabBar from "@/components/repeat-ui/commons-liquid-tab-bar/preview";

<CommonsLiquidTabBar items={items} />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add commons-liquid-tab-bar --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/commons-liquid-tab-bar/.

    import CommonsLiquidTabBar from "@/components/repeat-ui/commons-liquid-tab-bar/preview";

export default function Page() {
  return <CommonsLiquidTabBar />;
}

Props

PropTypeDefaultDescription
itemsLiquidTab[]-{ label, icon } for each tab.
valuenumber-Index of the active tab. Leave it out to let the bar keep its own.
defaultValuenumber0The tab that starts active when value is left out.
onChange(index: number) => void-Called with the new index when a tab is picked or the lens is dropped on one.
itemWidthnumber76Width of each tab in pixels. Tabs narrow to fit small screens.
heightnumber64Height of the bar in pixels.
showLabelsbooleantrueShow a label under each icon.
refractionnumber40How strongly the glass bends what is behind it.
chromaticnumber0.15Colour split along the rims. 0 turns it off.
blurnumber2Frost on the bar, in pixels.
saturationnumber1.6Boosts the colour of what shows through.
tintstring"#ffffff"Colour of the glass.
tintOpacitynumber0.1How much of the tint shows, from 0 to 1.
specularnumber0.7Brightness of the rims.
iconColorstring"#ffffff"Colour of the inactive tabs.
activeColorstring"#ffffff"Colour of the active tab.
classNamestring""Extra classes for the root element.

More commons

See all
AccordianAccordion component with smooth expand/collapse animations
Document Upload ModalDocument upload modal with drag and drop support
Search BarSearch bar component with keyboard shortcuts (Ctrl+K) and modal support