Ember UI LogoEmber UI
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/card
yarn shadcn@latest add @emberui/card
pnpm dlx shadcn@latest add @emberui/card
bunx --bun shadcn@latest add @emberui/card

Reference

This component is based on the shadcn/ui Card component.

On this page