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+ |