Components
Loading preview...
Here is animated tabs modern ui component
@animate-ui
npx shadcn@latest add https://21st.dev/r/skyleen77/animated-tabs// 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;