hextastudio/ui needs your support to stay running 🫶 Help us

Card

Collection of multiple reusable card components with props.

Preview

Card Image

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.

Installation

bash
npx hexta-ui add card button

tsx
import { Card } from "@/components/hexta-ui/Card";
import { Button } from "@/components/hexta-ui/Button";

Basic card

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.

tsx
<Card variant="primary">
    <p className="text-sm opacity-80">
      Qui ipsum aliquip in minim do pariatur pariatur sint
      fugiat anim. Proident eiusmod esse tempor mollit cillum
      in nostrud ea magna nisi proident quis.
    </p>
  </Card>

Outline card

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.

tsx
<Card variant="outline">
    <p className="text-sm opacity-80">
      Qui ipsum aliquip in minim do pariatur pariatur sint
      fugiat anim. Proident eiusmod esse tempor mollit cillum
      in nostrud ea magna nisi proident quis.
    </p>
  </Card>

Card with Top Image

Card Image

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.

tsx
<Card
  variant="imageTop"
  image="https://source.unsplash.com/random?kitty"
>
  <p className="text-sm opacity-80">
    Qui ipsum aliquip in minim do pariatur pariatur sint fugiat
    anim. Proident eiusmod esse tempor mollit cillum in nostrud ea
    magna nisi proident quis.
  </p>
</Card>

Card with Image Bottom

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.

Card Image

tsx
<Card
  variant="imageBottom"
  image="https://source.unsplash.com/random?kitty"
>
  <p className="text-sm opacity-80">
    Qui ipsum aliquip in minim do pariatur pariatur sint fugiat
    anim. Proident eiusmod esse tempor mollit cillum in nostrud ea
    magna nisi proident quis.
  </p>
</Card>

Card with Buttons

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.

Card with Buttons and Image

Card Image

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.