Tech Stack

Cards 29

About

Here is Tech Stack component

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

Code

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

Usage.tsx

// This is a demo of a preview
'use client'
import { Component } from "@/components/ui/tech-stack";

const DemoOne = () => {
  const techStack = [
    { name: 'Next.js', url: 'https://nextjs.org/', color: '#FFFFFF' },
    { name: 'React', url: 'https://react.dev/', color: '#61DAFB' },
    { name: 'TypeScript', url: 'https://www.typescriptlang.org/', color: '#3178C6' },
    { name: 'Tailwind CSS', url: 'https://tailwindcss.com/', color: '#06B6D4' },
    { name: 'Framer Motion', url: 'https://www.framer.com/motion/', color: '#0055FF' },
    { name: 'Node.js', url: 'https://nodejs.org/en', color: '#68A063' },
    { name: 'Vercel', url: 'https://vercel.com/', color: '#000000' },
  ];

  return (
    <div className="flex w-full h-screen justify-center items-center">
      <Component techStack={techStack} />
    </div>
  );
};

export default DemoOne;