Traken UI

Animated Cards

The Card component provides a flexible container for displaying grouped content with customizable appearance, including size, color, border radius, and shadow.

Float Card

Interactive 3D Rotating Card

Interactive 3D Rotating Card

Experience the dynamic elegance of a 3D animated card that comes to life with interactive rotation.

installation

Install Dependencies

npm install motion react-icons

Add util file

Create a file named utils.ts in the same directory as the component and add the following code:

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

use this component in your app

 <FloatCard />

Flip Card

Lalisa

Lalisa Manobal (Lisa)

Rapper • Dancer • Singer • BLACKPINK

installation

Install Dependencies

npm install motion react-icons

Add util file

Create a file named utils.ts in the same directory as the component and add the following code:

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

use this component in your app

 <FlipCard />

Slide Card

Lisa

Mortal Kombat

Tommy Vercetti

Model

installation

Install Dependencies

npm install motion react-icons

Add util file

Create a file named utils.ts in the same directory as the component and add the following code:

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

use this component in your app

 <SlideCard />

Astronaut Social Card

Astronaut
We're on Social Media

installation

Install Dependencies

npm install motion react-icons

Add util file

Create a file named utils.ts in the same directory as the component and add the following code:

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

use this component in your app

 <Astro />

Navbar Component

The `Navbar` component provides an animated navigation interface with smooth transitions and interactive effects.

Traditional Component

The `Hero` component creates a visually engaging section with dynamic text and image animations, ideal for headers or landing pages.

On this page