Pixel Perfect Logoixel Perfect
Getting Started

Installation

Learn how to install and set up the UI library in your project

Open in v0

Installation

Get started with the UI library by installing it in your project.

Prerequisites

Before installing, make sure you have:

  • Node.js 18+ installed
  • A React 18+ project
  • Tailwind CSS configured (if using styled components)

Install via npm

npm install @pixelperfect/ui

Install via yarn

yarn add @pixelperfect/ui

Install via pnpm

pnpm add @pixelperfect/ui

Configuration

After installation, you'll need to configure your project to use the components.

Tailwind CSS Setup

If you're using Tailwind CSS, make sure your tailwind.config.js includes the library's content paths:

module.exports = {
  content: [
    './node_modules/@your-library/ui/**/*.{js,ts,jsx,tsx}',
    // ... your other content paths
  ],
}

Import Components

You can import components individually:

import { Button } from '@your-library/ui/components/Button';
import { Card } from '@your-library/ui/components/Card';

Or import from the main entry point:

import { Button, Card, Input } from '@your-library/ui';

Next Steps