Installation
Get started with PhexarUI in minutes.
1. Prerequisites
PhexarUI is built on top of Tailwind CSS v4 and Motion (formerly Framer Motion).
Ensure you have Tailwind CSS installed. If you haven't initialized shadcn/ui yet, we recommend doing so to set up your base structure:
npx shadcn@latest initpnpm dlx shadcn@latest initbunx shadcn@latest init2. Install utilities
PhexarUI relies on a cn utility function for class merging. If you don't have it, install it via the CLI:
npx shadcn@latest add https://phexar-ui.vercel.app/r/utils.jsonpnpm dlx shadcn@latest add https://phexar-ui.vercel.app/r/utils.jsonbunx shadcn@latest add https://phexar-ui.vercel.app/r/utils.json3. Add Components
You can now add any component to your project. Dependencies (like lucide-react or motion) will be installed automatically.
For example, to add the Elastic Search Bar:
npx shadcn@latest add https://phexar-ui.vercel.app/r/elastic-search-bar.jsonpnpm dlx shadcn@latest add https://phexar-ui.vercel.app/r/elastic-search-bar.jsonbunx shadcn@latest add https://phexar-ui.vercel.app/r/elastic-search-bar.jsonThen, simply import it into your page:
import Card05 from "@/components/phexarui/elastic-search-bar";
export default function Page() {
return <ElasticSearchbar/>;
}3. Blocks
Blocks are a set of components to make a complete blocks, they contain multiples files. To install them it is mandatory to use the cli. For example it you'd like to install ai-card-generation block:
npx shadcn@latest add https://phexar-ui.vercel.app/r/ai-card-generation.jsonpnpm dlx shadcn@latest add https://phexar-ui.vercel.app/r/ai-card-generation.jsonbunx shadcn@latest add https://phexar-ui.vercel.app/r/ai-card-generation.jsonThen, add to your page and it works!
/**
* AICardGeneration require 5 additional components
* that will be automatically installed with the CLI.
*/
import AICardGeneration from "@/components/phexarui/AICardGeneration";
export default function Page() {
return <AICardGeneration />;
}4. Optional dependencies
Some components require additional libraries, listed at the bottom of each components. Make sure to install them to ensure the component works properly.
5. Monorepo
For monorepo shadcn/ui CLI contain the options -c to the path to your workspace for example:
npx shadcn@latest add https://phexar-ui.vercel.app/r/elastic-search-bar -c ./apps/wwwpnpm dlx shadcn@latest add https://phexar-ui.vercel.app/r/elastic-search-bar.json -c ./apps/wwwbunx shadcn@latest add https://phexar-ui.vercel.app/r/elastic-search-bar -c ./apps/www