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 Name | Type | Description |
---|---|---|
name | string | Name of the Tech |
url | string | Link to the Tech |
color | string | Color symbol of the Tech |