Installation
Get piece-ui running in your project in under 2 minutes. Works with any React framework.
Prerequisites
- React 18+— peer dependency
- Tailwind CSS 3+— for utility classes
- Framer Motion 11+— for animated components
- TypeScript— recommended
New project?
If you're starting fresh, scaffold a project first then add piece-ui:
1# Next.js
2npx create-next-app@latest my-app --typescript --tailwind
3cd my-app
4npm install piece-ui framer-motion
5
6# Vite + React
7npm create vite@latest my-app -- --template react-ts
8cd my-app
9npm install tailwindcss autoprefixer postcss framer-motion piece-uiInstall piece-ui
Install the package and its peer dependencies:
Using yarn? yarn add piece-ui framer-motion | pnpm? pnpm add piece-ui framer-motion
Configure Tailwind CSS
Add the piece-ui dist folder to your Tailwind content array so Tailwind scans and includes its classes:
1// tailwind.config.ts
2import type { Config } from "tailwindcss";
3
4const config: Config = {
5 content: [
6 "./app/**/*.{js,ts,jsx,tsx}",
7 "./components/**/*.{js,ts,jsx,tsx}",
8 // Add piece-ui to content so Tailwind picks up its classes:
9 "./node_modules/piece-ui/dist/**/*.{js,mjs}",
10 ],
11 theme: {
12 extend: {
13 colors: {
14 accent: "#00bfff",
15 "accent-strong": "#00f0ff",
16 },
17 },
18 },
19 plugins: [],
20};
21
22export default config;Add CSS design tokens
Add the following CSS variables to your global stylesheet. These tokens power piece-ui's theming system:
1/* globals.css */
2@tailwind base;
3@tailwind components;
4@tailwind utilities;
5
6:root {
7 --background: #0d0d0d;
8 --border-color: #333333;
9 --border-primary: #333333;
10 --white: #f5f4f4;
11 --light-gray: #b3b3b3;
12 --accent: #00bfff;
13 --accent-strong: #00f0ff;
14 --accent-gradient: linear-gradient(120deg, #00f0ff 0%, #7000ff 100%);
15}Import and use
All components are exported from piece-ui. Import what you need:
1import { Button, ArticleCard, Header } from "piece-ui";
2
3export default function App() {
4 return (
5 <div>
6 <Header
7 logo="MyApp"
8 routes={[
9 { label: "Home", href: "/" },
10 { label: "About", href: "/about" },
11 ]}
12 />
13 <main>
14 <Button variant="primary">Hello, Piece UI!</Button>
15 </main>
16 </div>
17 );
18}Prefer copy & paste?
Every component page includes the full source code. You can copy it directly into your project instead of installing via npm — perfect if you want to customize components at the source level.
1// Copy the component source from the docs
2// and paste it into your components/ folder.
3// Then import it directly — no npm package needed.
4
5import { Button } from "@/components/Button";Navigate to any component page and use the copy button on the code block.
TypeScript support
All components ship with TypeScript definitions. Props are fully typed — your editor will show autocompletion and type errors automatically. No @types package needed.