Reddot UI Library

Docs
Card

Card

Displays a card with header, content, and footer.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/card.json

Utilisation

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
export function CardDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card Content</p>
      </CardContent>
      <CardFooter>
        <p>Card Footer</p>
      </CardFooter>
    </Card>
  )
}

Exemple avec formulaire

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"
 
export function CardWithForm() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <div className="grid w-full items-center gap-4">
            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="name">Name</Label>
              <Input id="name" placeholder="Name of your project" />
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}

API Reference

Card

Le conteneur principal de la carte.

CardHeader

Contient le titre et la description de la carte.

CardTitle

Le titre de la carte.

CardDescription

La description qui donne plus d'informations sur la carte.

CardContent

La zone de contenu principal de la carte.

CardFooter

La section inférieure de la carte, généralement pour les actions.

Notes

  • Ce composant UI fait partie du système de design
  • Respecte les conventions de style et d'accessibilité
  • Composable avec différentes sections (header, content, footer)
  • Flexible pour diverses mises en page