logonpix

Card

Example
Sign in
Use your account
Props

Interactive

Installation
npx npix@latest add Card
Usage
<>
  <Card
    className="space-y-4 w-[400px]"
  >
    <div>
      <CardTitle>
        Sign in
      </CardTitle>
      <CardDescription>
        Use your account
      </CardDescription>
    </div>
    <div className="space-y-2">
      <label htmlFor="email">
        Email
      </label>
      <Input
        id="email"
        placeholder="Email"
        type="email"
      />
      <a
        className="text-sm text-indigo-400"
        href="#"
      >
        Forgot email?
      </a>
    </div>
    <div className="space-y-2">
      <label htmlFor="password">
        Password
      </label>
      <Input
        id="password"
        placeholder="Password"
        type="password"
      />
      <a
        className="text-sm text-indigo-400"
        href="#"
      >
        Forgot password?
      </a>
    </div>
    <div>
      <Button>
        Sign in
      </Button>
    </div>
  </Card>
</>
API

interactive

boolean

Whether the card is interactive (i.e. show shadow and pointer cursor on hover) or not


children

React.ReactNode

Card content


FieldDescriptionType
interactiveWhether the card is interactive (i.e. show shadow and pointer cursor on hover) or notboolean
childrenCard contentReact.ReactNode