Installation

Seamlessly integrate high-performance components into your workflow. Whether you prefer full control via manual copying or speed via CLI, getting started is instant.

Choose Your Path

Select Component

Browse the gallery, preview interactions, and find the perfect building block for your UI. Once chosen, navigate to the Code tab.

Install Dependencies

Some components leverage powerful libraries like Framer Motion or GSAP. Copy the install command manually.

Terminal

npm install framer-motion clsx tailwind-merge

Integrate Code

Copy the component source code. We provide variants for different styling solutions.

SplitText.tsx

TypeScript

import { motion } from "framer-motion";

export function SplitText({ children, ...props }) {
  return (
    <motion.div className="overflow-hidden" {...props}>
      {children}
    </motion.div>
  );
}

Usage & Customization

Import the component into your page. All components are designed to be modular—feel free to edit the source code to match your brand's specific design tokens.

Ready to Build?

The code is yours. No hidden dependencies, no vendor lock-in. Modify, extend, and deploy.

Back to Intro Browse Components