Getting Started

Follow these steps to install dependencies and integrate our components into your project.

Installation

Begin by installing the necessary packages for peer dependencies like Framer Motion and Lucide Icons, which our components may rely on for animations and iconography.

npm install

$ npm install framer-motion lucide-react

# Installs framer-motion for animations and lucide-react for icons

For other package managers:

tsx

yarn add framer-motion lucide-react

tsx

pnpm add framer-motion lucide-react

Our UI components are typically located within src/components/ui/. You can copy the ones you need directly into your project or set up an alias if you plan to use many of them.

Quick Start

After installation, you can easily import and use the components.

1. Import a Component

tsx

import Button from '@/components/ui/button'; // Adjust path if needed
import { Rocket } from 'lucide-react';

2. Use in Your JSX

tsx

function MyAwesomePage() {
  return (
    <Button 
      variant="primary" 
      size="lg" 
      onClick={() => alert('Liftoff!')}
    >
      <Rocket className="w-5 h-5 mr-2" />
      Launch
    </Button>
  );
}

Key Dependencies

React (v18+)

Our components are built with React and require a compatible version.

Tailwind CSS (v3+)

Styling is primarily handled by Tailwind CSS. Ensure your project is configured.

Framer Motion

Used for animations in many components. Install if you want animations.

Lucide React

Provides the icon set used in our components and examples.

Next Steps

Now that you have the basics, explore our component library to see all available UI elements or check out practical examples.