Components
Card
A card component
Preview
Loading...
import { Button } from "@/registry/axon/ui/button";import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/registry/axon/ui/card";import { Input } from "@/registry/axon/ui/input";import { Label } from "@/registry/axon/ui/label";export default function CardDemo() { return ( <Card className="w-full max-w-sm"> <CardHeader> <CardTitle>Login to your account</CardTitle> <CardDescription> Enter your email below to login to your account </CardDescription> <CardAction> <Button variant="link">Sign Up</Button> </CardAction> </CardHeader> <CardContent> <form> <div className="flex flex-col gap-6"> <div className="grid gap-2"> <Label htmlFor="email">Email</Label> <Input id="email" placeholder="m@example.com" required type="email" /> </div> <div className="grid gap-2"> <div className="flex items-center"> <Label htmlFor="password">Password</Label> <a className="ml-auto inline-block text-sm underline-offset-4 hover:underline" href="#" > Forgot your password? </a> </div> <Input id="password" required type="password" /> </div> </div> </form> </CardContent> <CardFooter className="flex-col gap-2"> <Button className="w-full" type="submit"> Login </Button> <Button className="w-full" variant="outline"> Login with Google </Button> </CardFooter> </Card> );}Installation
CLI
npx shadcn@latest add @emberui/cardyarn shadcn@latest add @emberui/cardpnpm dlx shadcn@latest add @emberui/cardbunx --bun shadcn@latest add @emberui/cardReference
This component is based on the shadcn/ui Card component.