Flexnative Tabs

Galleries 39

About

Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Flexnative Tabs to your project and fits it to your theme.

Code

How Flexnative Tabs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client'

import { useState } from 'react'

import { Tabs, TabsList, TabsTrigger } from '@/components/ui/flexnative-tabs'
import { cn } from '@/lib/utils'

const items = [
  {
    label: 'Design',
    src: 'https://cdn.21st.dev/assets/mirror/7b/7b928ba52e09af197ba8e754c8e4fede3512dd56ec01ba927df7225461218ec5.jpg',
  },
  {
    label: 'Components',
    src: 'https://cdn.21st.dev/assets/mirror/65/651fb828fdb9ccec609e624c76e2bf50ad4d74a18de8558db843bd1887d603ce.jpg',
  },
  {
    label: 'Developer',
    src: 'https://cdn.21st.dev/assets/mirror/ff/fff904f410fb663fd7650d5d88d378f611d31df2eb4a80e90dee6e75375c7a5b.jpg',
  },
] as const

export function Tabs15() {
  const [activeIndex, setActiveIndex] = useState(0)

  return (
    <Tabs
      value={String(activeIndex)}
      onValueChange={(value) => setActiveIndex(Number(value))}
      className="w-full max-w-md items-center gap-6"
    >
      <div className="flex w-full justify-center p-1">
        <TabsList className="mx-auto h-auto gap-1.5 bg-transparent p-0 shadow-none">
          {items.map((tab, index) => (
            <TabsTrigger
              key={tab.label}
              value={String(index)}
              className="text-muted-foreground data-[state=active]:text-foreground data-[state=active]:bg-muted hover:bg-muted hover:text-foreground dark:data-[state=active]:bg-accent dark:hover:text-foreground rounded-2xl border-none bg-transparent px-3 py-2 text-sm shadow-none transition-colors data-[state=active]:font-medium data-[state=active]:shadow-none group-data-[variant=default]/tabs-list:data-[state=active]:shadow-none"
            >
              {tab.label}
            </TabsTrigger>
          ))}
        </TabsList>
      </div>

      <div className="relative aspect-square max-h-60 w-full overflow-hidden rounded-2xl">
        {items.map((item, index) => (
          <div
            key={item.label}
            className={cn(
              'absolute inset-0 transition-opacity duration-500',
              index === activeIndex ? 'opacity-100' : 'opacity-0',
            )}
          >
            <img
              src={item.src}
              alt={item.label}
              loading={index === 0 ? 'eager' : 'lazy'}
              decoding="async"
              className="absolute inset-0 size-full object-cover"
            />
          </div>
        ))}
      </div>
    </Tabs>
  )
}

export default function Default() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
      <Tabs15 />
    </div>
  )
}