Traken UI

Progress Stepper

The Stepper component provides an animated step-by-step process indicator with a smooth flowing animation and customizable appearance.

Astronaut Social Card

1

Step 1

2

Step 2

3

Step 3

4

Step 4

Step 1

This is the first step.

Step 1 of 4

installation

Install Dependencies

To use the Astronaut Social Card component, you need to install the following 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

<ProgressSteps />

Animated Text Background

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

Traken Portfolio

A complete developer portfolio template

On this page