Installation
Installing dependencies and setting up the project.
Project Update: Tailwind CSS v4
This project now uses Tailwind CSS v4. Please ensure your own project is set up with Tailwind v4 before adding components from this library. The installation relies on the shadcn/ui CLI for project setup and component installation.
Setup Tailwind v4 and shadcn/ui.
This project uses Tailwind CSS v4. Ensure your project is also configured for Tailwind v4 (see the Tailwind v4 Upgrade Guide and shadcn/ui Tailwind v4 docs) before proceeding with shadcn/ui setup.
Then, follow the shadcn/ui installation guide to initialize shadcn/ui in your v4 project.
Install Base UI Components.
npm install @base-ui-components/react
Add Root class to your app layout.
<body>
<div className="isolate">{children}</div>
</body>Add Based UI theme to your project.
npx shadcn@latest add "https://ui.fldr.zip/r/theme.json"
That's it! You can now install the components.
Icons
Based UI uses lucide-react for icons.
For a more extensive collection of icons, consider using Monicon, which offers over 200,000 icons from various popular libraries.
If you are looking for animated icons, the pqoqubbw/icons library is a great choice.
LLMs
If you're using Cursor, add this file to your project:
# Based UI
This is based on base-ui-components, although it has shadcn/ui compatibility.
accordion
alert-dialog
alert
aspect-ratio
avatar
badge
breadcrumbs
button
calendar
card
carousel
chart
checkbox
collapsible
command
context-menu
data-button
dialog
drawer
dropdown
emoji-picker
field
form
input-otp
input
kbd
label
menubar
popover
preview-card
progress
radio-group
scroll-area
select
separator
sheet
skeleton
slider
sonner
switch
table
tabs
textarea
toggle-group
toggle
toolbar
tooltip
Some small differences between based-ui and shadcn/ui:
- badge has some special colors and styling
- action-button is a stateful button for form submission
# Setup based-ui
## 1. Setup Tailwind CSS v4
Install Tailwind v4 and its PostCSS plugin:
### pnpm
pnpm add -D tailwindcss@next @tailwindcss/postcss@next
Configure Tailwind according to the [v4 upgrade guide](https://tailwindcss.com/docs/upgrade-guide) (using `@import "tailwindcss";` and `@theme` in your CSS).
## 2. Initialize shadcn/ui in your project
Choose your package manager and run the init command:
### pnpm
pnpm dlx shadcn-ui@latest init
Follow the prompts.
## 3. Install Base UI Components
### pnpm
pnpm add @base-ui-components/react
## 4. Add Root class to your app layout
Update your layout file (e.g., `layout.tsx` or `layout.jsx`):
// layout.tsx or layout.jsx
<body>
<div className="isolate">{children}</div>
</body>
## 5. Add Project Theme Variables
### pnpm
pnpm dlx shadcn add "https://ui.fldr.zip/r/theme.json"
## 6. That's it! You can now install the components.
### pnpm
npx shadcn@latest add https://ui.fldr.zip/r/button.json