Animated Tabs

Buttons 66

About

Here is animated tabs modern ui component

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

Code

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

Usage.tsx

// demo.tsx
'use client';

import * as React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Component,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsContents,
} from '@/components/ui/animated-tabs';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';

const DemoOne = () => {
  return (
    <div className={cn("flex w-full min-h-screen justify-center items-center bg-neutral-100 dark:bg-neutral-900 p-4")}>
      <Component defaultValue="account" className="w-[400px] bg-muted rounded-lg">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="password">Password</TabsTrigger>
        </TabsList>

        <TabsContents className="mx-1 mb-1 -mt-2 rounded-sm h-full bg-background">
          <TabsContent value="account" className="space-y-6 p-6">
            <p className="text-sm text-muted-foreground">
              Make changes to your account here. Click save when you're done.
            </p>

            <div className="space-y-3">
              <div className="space-y-1">
                <Label htmlFor="name">Name</Label>
                <Input id="name" defaultValue="Pedro Duarte" />
              </div>
              <div className="space-y-1">
                <Label htmlFor="username">Username</Label>
                <Input id="username" defaultValue="@peduarte" />
              </div>
            </div>

            <Button>Save changes</Button>
          </TabsContent>
          <TabsContent value="password" className="space-y-6 p-6">
            <p className="text-sm text-muted-foreground">
              Change your password here. After saving, you'll be logged out.
            </p>
            <div className="space-y-3">
              <div className="space-y-1">
                <Label htmlFor="current">Current password</Label>
                <Input id="current" type="password" />
              </div>
              <div className="space-y-1">
                <Label htmlFor="new">New password</Label>
                <Input id="new" type="password" />
              </div>
              <div className="space-y-1">
                <Label htmlFor="confirm">Confirm password</Label>
                <Input id="confirm" type="password" />
              </div>
            </div>

            <Button>Save password</Button>
          </TabsContent>
        </TabsContents>
      </Component>
    </div>
  );
};

export default DemoOne;