Card

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

A simple nirmaan 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

npx shadcn@latest add https://nirmaan-ui.vercel.app/r/nirmaan-card.json

Usage

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

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

Image Card

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

A simple nirmaan image card component

Tax Management

What is Web 3?

Installation

npx shadcn@latest add https://nirmaan-ui.vercel.app/r/nirmaan-image-card.json

Usage

import { ImageCard } from "@/components/ui/nirmaan-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 nirmaan flip card.

nirmaan UI Pro Plan

$0/month

😜 You thought it costs money?

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

npx shadcn@latest add https://nirmaan-ui.vercel.app/r/nirmaan-flip-card.json

Usage

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

 <FlipCard size="default" className="cursor-pointer">
  <FlipCardFront>
    <FlipCardImage
      src=""
      alt="nirmaan UI"
      overlayContent={
        <div className="text-left">
          <div>nirmaan 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>