Skip to main content

Adding Components

shadcn/ui​

npx shadcn@latest add <component>

Components land in components/ui/. Never edit them directly — extend via composition.

Framer Motion​

'use client';
import { motion } from 'framer-motion';

// Define variants at top of file, not inline
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

Aceternity UI (planned)​

Not yet installed. Will be added for hero sections and spotlight effects.

# When ready:
npx aceternity-ui@latest add <component>

React Three Fiber (planned)​

Not yet installed. Only for designated 3D sections.

Lucide icons​

import { ArrowRight } from 'lucide-react';

Browse at lucide.dev.