Getting Started

Installation

Install the packages using your preferred package manager:

pnpm add @px-ui/core @px-ui/forms

Peer Dependencies

PX-UI requires the following peer dependencies to be installed in your project.

For @px-ui/core

pnpm add @tanstack/react-query date-fns

For @px-ui/forms

The forms package depends on @px-ui/core, so you'll need all the core dependencies plus:

pnpm add zod react-hook-form @hookform/resolvers

Complete Installation

To install everything at once:

pnpm add @px-ui/core @px-ui/forms @tanstack/react-query date-fns zod react-hook-form @hookform/resolvers

CSS Setup

Import the PX-UI styles in your main tailwind CSS file (e.g., tailwind.css or app.css):

/* make sure you add it after the tailwind.css import */
/* @import "tailwind.css"; */
@import "@px-ui/core/fonts.css";
@import "@px-ui/core/styles.css";

This will inject:

• fonts.css: The Lato font family used throughout the components
• styles.css: All component styles and design tokens (colors, spacing, typography)

Quick Start

Here's a simple example using the Button component:

import { Button } from "@px-ui/core";

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
    </div>
  );
}

Next Steps

• Browse the Button component to see available variants
• Explore all Components in the sidebar
• Check out Form Fields for form building