Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
Login
Enter your credentials to access your account
"use client";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { MagicCard } from "@/registry/magicui/magic-card";
import { useTheme } from "next-themes";
export function MagicCardDemo() {
const { theme } = useTheme();
return (
<Card className="p-0 max-w-sm w-full shadow-none border-none">
<MagicCard
gradientColor={theme === "dark" ? "#262626" : "#D9D9D955"}
className="p-0"
>
<CardHeader className="border-b border-border p-4 [.border-b]:pb-4">
<CardTitle>Login</CardTitle>
<CardDescription>
Enter your credentials to access your account
</CardDescription>
</CardHeader>
<CardContent className="p-4">
<form>
<div className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="name@example.com" />
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" />
</div>
</div>
</form>
</CardContent>
<CardFooter className="p-4 border-t border-border [.border-t]:pt-4">
<Button className="w-full">Sign In</Button>
</CardFooter>
</MagicCard>
</Card>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/magic-card
Usage
import { MagicCard } from "@/registry/magicui/magic-card";
<MagicCard>
<div className="p-4">
<p>Hello World</p>
<span>Hover me</span>
</div>
</MagicCard>
Props
MagicCard
Prop name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | - | The content to be rendered inside the card |
className | string | - | Additional CSS classes to apply to the card |
gradientSize | number | 200 | Size of the gradient effect |
gradientColor | string | #262626 | Color of the gradient effect |
gradientOpacity | number | 0.8 | Opacity of the gradient effect |
gradientFrom | string | #9E7AFF | Start color of the gradient border |
gradientTo | string | #FE8BBB | End color of the gradient border |
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development