Card

Create project

Deploy your new project in one click.

Name

import {Button,Card,CardContent,CardDescription,CardFooter,CardHeader,CardTitle,Input,Label,} from "@murasakijs/ui";export function CardDemo() {return (  <Card className="w-full max-w-sm">    <CardHeader>      <CardTitle>Create project</CardTitle>      <CardDescription>Deploy your new project in one click.</CardDescription>    </CardHeader>    <CardContent>      <div className="grid w-full items-center gap-1.5">        <Label htmlFor="name">Name</Label>        <Input id="name" placeholder="Name of your project" />      </div>    </CardContent>    <CardFooter>      <Button className="w-full">Deploy</Button>    </CardFooter>  </Card>);}

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@murasakijs/ui";

<Card>
  <CardHeader>
    <CardTitle>Card title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>

API Reference

Subcomponents

Component	Renders
`Card`	The outer bordered container.
`CardHeader`	Vertical stack for `CardTitle` / `CardDescription`.
`CardTitle`	The card's heading.
`CardDescription`	Muted supporting text under the title.
`CardContent`	The main body of the card.
`CardFooter`	A row for actions, typically buttons.

All subcomponents extend HTMLAttributes<HTMLDivElement> — pass any native <div> prop (className, onClick, ...) to any of them.

Usage

API Reference

Subcomponents

On this page