Piko UI

A modern UI component library built with React, Radix UI, and Tailwind CSS.

Installation

npm install piko-ui
# or
yarn add piko-ui
# or
pnpm add piko-ui

Setup

1. Add Tailwind CSS configuration

Add the Piko UI plugin to your tailwind.config.js file:

// tailwind.config.js
import { pikoPreset } from 'piko-ui/preset';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // Your content paths...
    './node_modules/piko-ui/dist/**/*.{js,ts,jsx,tsx}',
  ],
  presets: [pikoPreset],
  // Your theme and plugin configurations...
};

2. Import the styles

Import the Piko UI styles in your main CSS file:

@import 'piko-ui/styles.css';

Usage

Using the entire library

import { Button, Card, Tabs } from 'piko-ui';

export default function App() {
  return (
    <Card>
      <Button>Click me</Button>
    </Card>
  );
}

Using individual components (tree-shakable)

You can import components individually to reduce bundle size:

import { Button } from 'piko-ui/components/button';
import { Card } from 'piko-ui/components/card';

export default function App() {
  return (
    <Card>
      <Button>Click me</Button>
    </Card>
  );
}

Using utilities

import { cn } from 'piko-ui/lib/utils';

Components

Piko UI includes a wide range of components:

• Basic Components: Button, Text, Heading, Badge, etc.
• Layout Components: Container, Grid, Section, etc.
• Form Components: Input, Checkbox, Select, etc.
• Navigation Components: Tabs, Navigation Menu, Pagination, etc.
• Feedback Components: Alert, Progress, Skeleton, etc.
• Overlay Components: Dialog, Drawer, Popover, etc.
• Data Display Components: Table, Card, Avatar, etc.

Theming

Piko UI supports theming through CSS variables. You can customize the colors, border radius, and other design tokens by modifying the CSS variables.

:root {
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
  /* Add more variable overrides here */
}

License

MIT