Unstyled highly composable components that you can copy/paste in your own codebase. Built with Tailwind CSS and a bit of Framer Motion. Customize them as you want.
Here is the exact same Card component:
import { clx } from "@/lib/utils/clx/clx-merge";// 💪 MUCH SIMPLIER... 💪export const Card = clx.div("rounded-xl border bg-card text-card-foreground shadow p-6");export const CardHeader = clx.div("flex flex-col space-y-1.5");export const CardTitle = clx.h3("text-2xl font-semibold leading-none tracking-tight");export const CardContent = clx.div("pt-4");export const CardFooter = clx.div("flex items-center pt-0");export const CardText = clx.p("text-muted-foreground");export const CardDescription = clx.p(CardText, "text-sm");// └──> 🤯 ...AND COMPOSABLE! 🤯
Here is a comparison between Ever UI, Shadcn, Aceternity and Magic UI.
| Features | Ever UI | Shadcn | Aceternity | Magic UI |
|---|---|---|---|---|
| CLI | ||||
| Motion | ||||
| Primitives | ||||
| Icons | ||||
| Ref handling | ||||
| Composability | ||||
| Short syntax | ||||
| Pricing | Free | Free | Free | Free + Paid |
| Hooks | 80+ | 0 | 0 | 0 |
| Components | 220+ | 50+ | 70+ | 50+ |