https://github.com/anchaldevbytes/phexar-ui
A UI Library
https://github.com/anchaldevbytes/phexar-ui
fumadocs motion nextjs tailwindcss typescript ui-library
Last synced: 2 months ago
JSON representation
A UI Library
- Host: GitHub
- URL: https://github.com/anchaldevbytes/phexar-ui
- Owner: AnchalDevBytes
- Created: 2025-11-05T07:58:17.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-11-27T11:28:48.000Z (7 months ago)
- Last Synced: 2025-11-27T22:26:03.012Z (7 months ago)
- Topics: fumadocs, motion, nextjs, tailwindcss, typescript, ui-library
- Language: TypeScript
- Homepage: https://phexar-ui.vercel.app
- Size: 912 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PhexarUI
Craft Exquisite Interfaces in Minutes.
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.
[**Explore the Docs**](https://phexar-ui.vercel.app) · [**Browse Components**](https://phexar-ui.vercel.app/docs) · [**Report Bug**](https://github.com/AnchalDevBytes/phexar-ui/issues)
---
## ✨ Philosophy
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.
## 🛠️ Tech Stack
* **Framework:** [React](https://react.dev) / [Next.js](https://nextjs.org)
* **Styling:** [Tailwind CSS v4](https://tailwindcss.com)
* **Animations:** [Motion](https://motion.dev) (formerly Framer Motion)
* **Icons:** [Lucide React](https://lucide.dev)
* **Utils:** `clsx` & `tailwind-merge`
## 🚀 Getting Started
### 1. Prerequisites
Ensure your project is set up with Tailwind CSS v4. Then, install the core dependencies:
```bash
npm install motion lucide-react clsx tailwind-merge
```
### 2. Utility Function
Ensure you have a `cn` helper function (standard in the shadcn ecosystem) in `lib/utils.ts`:
```bash
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
```
## Usage
You can add components to your project via the CLI or by manually copying the code from the documentation.
### Option A: CLI (Recommended)
To add the Elastic Search Bar, for example:
```bash
npx shadcn@latest add https://phexar-ui.vercel.app/r/elastic-search-bar.json
```
### Option B: Manual Copy
1. Browse the Documentation.
2. Select a component.
3. Click "View Code" or "Copy".
4. Paste it into your project (e.g., components/phexarui/cards/dev-card.tsx).