TechStack

Techstack component displaying a list of technologies you
are good at with a interactive hover effect.

Installation
npx @ayushmxxn/serenity-ui@latest add techstack
Usage
import React from 'react'
import TechStack from './components/ui/Techstack'

const techStack = [
  { name: 'Next.js', url: 'https://nextjs.org', color: '#F472B6' },
  { name: 'React', url: 'https://reactjs.org', color: '#61dafb' },
  { name: 'Git', url: 'https://git-scm.com', color: '#818CF8' },
  { name: 'Figma', url: 'https://figma.com', color: '#a259ff' },
  { name: 'TypeScript', url: 'https://www.typescriptlang.org', color: '#2DD4BF' },
  { name: 'Tailwind CSS', url: 'https://tailwindcss.com', color: '#38b2ac' },
  { name: 'Framer Motion', url: 'https://www.framer.com/motion', color: '#A78BFA' },
];

function page() {
  return (
    <div>
      <TechStack techStack={techStack} />
    </div>
  )
}

export default page;

Props

Prop NameTypeDescription
namestringName of the Tech
urlstringLink to the Tech
colorstringColor symbol of the Tech
Built byAyushmaan Singh. The source code is available onGithub