Flexnative Tabs

Navigation 5

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 {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/components/ui/flexnative-tabs'

export function Tabs02() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-md items-center">
      <TabsList variant="line">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="text-muted-foreground pt-4">
        Snapshot of your workspace.
      </TabsContent>
      <TabsContent value="activity" className="text-muted-foreground pt-4">
        Latest events across your team.
      </TabsContent>
      <TabsContent value="reports" className="text-muted-foreground pt-4">
        Generated reports and exports.
      </TabsContent>
    </Tabs>
  )
}

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