Card

Displays a card or a component that looks like a crazxy card.

A simple crazxy card component

Card Title

Card Description

This is the default variant of the card component.

Card Title

Card Description

This is the dots variant of the card component.

Card Title

Card Description

This is the gradient variant of the card component.

Card Title

Card Description

This is the plus variant of the card component.

Card Title

Card Description

This is the neubrutalism variant of the card component.

Card Title

Card Description

This is the corners variant of the card component.

Card Title

Card Description

This is the inner variant of the card component.

Card Title

Card Description

This is the lifted variant of the card component.

Installation

pnpm dlx shadcn@latest add https://crazxyui.in/r/crazxy-card.json

Usage

import { Card } from "@/components/ui/crazxy-ui/card"

 <Card title="" description="" variant="" className=""/>

Image Card

Displays a card or a component that looks like a crazxy image card.

A simple crazxy image card component

Tax Management

What is Web 3?

Installation

pnpm dlx shadcn@latest add https://crazxyui.in/r/crazxy-image-card.json

Usage

import { ImageCard } from "@/components/ui/crazxy-ui/image-card"

 <ImageCard title="Image Card Title" description="This is an image card description." imageUrl="https://via.placeholder.com/300" />

Flip Card

Displays a card or a component that looks like a crazxy flip card.

Crazxy UI Pro Plan

$0/month

😜 You thought it costs money?

It's so free, even pirates are confused. ☠️

pnpm dlx shadcn@latest add https://crazxyui.in/r/crazxy-flip-card.json

Usage

import { FlipCard, FlipCardFront, FlipCardBack, FlipCardImage } from "@/components/ui/crazxy-ui/flip-card"

 <FlipCard size="default" className="cursor-pointer">
  <FlipCardFront>
    <FlipCardImage
      src=""
      alt="Crazxy UI"
      overlayContent={
        <div className="text-left">
          <div>Crazxy UI Pro Plan</div>
          <div>$0/month</div>
        </div>
      }
    />
  </FlipCardFront>
  <FlipCardBack>
    <FlipCardContent>
      <FlipCardTitle>😜 You thought it costs money?</FlipCardTitle>
      <p >
        It&apos;s so free, even pirates are confused. ☠️
      </p>
      <button>
        Got it 😂
      </button>
    </FlipCardContent>
  </FlipCardBack>
</FlipCard>