A collection of high-quality, copy-paste React components built with Tailwind CSS v4 and Motion. Designed for the modern web with a focus on micro-interactions and neutral aesthetics.
PhexarUI is not a component library you install as a dependency. It is a collection of reusable code that you copy and paste into your project.
- Neutral by Default: Designed to fit into any brand identity without fighting for attention.
- Micro-interactions: Every component features subtle, thoughtful animations powered by
motion/react. - Tailwind v4 Native: Built for the future of CSS, leveraging the new engine and CSS variables.
- Copy & Paste: You own the code. Customize it, break it, make it yours.
- Framework: React / Next.js
- Styling: Tailwind CSS v4
- Animations: Motion (formerly Framer Motion)
- Icons: Lucide React
- Utils:
clsx&tailwind-merge
Ensure your project is set up with Tailwind CSS v4. Then, install the core dependencies:
npm install motion lucide-react clsx tailwind-mergeEnsure you have a cn helper function (standard in the shadcn ecosystem) in lib/utils.ts:
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}You can add components to your project via the CLI or by manually copying the code from the documentation.
To add the Elastic Search Bar, for example:
npx shadcn@latest add https://phexar-ui.vercel.app/r/elastic-search-bar.json- Browse the Documentation.
- Select a component.
- Click "View Code" or "Copy".
- Paste it into your project (e.g., components/phexarui/cards/dev-card.tsx).
Built with ❤️ by Anchal Raj