Form Card

A form's visual container — title area, field slot, action footer. Never renders a <form> itself.

cards
card
structural
form

Sign in

EmailPassword

Continue

Quick usage

usage

import { FormCard } from "@pinky-ui/components";

<FormCard title="Sign in" footer={<PrimaryButton>Continue</PrimaryButton>}>
  <TextField label="Email" />
  <TextField label="Password" type="password" />
</FormCard>

Presets

Default

Titled form container.

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add form-card

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
title	ReactNode	—	Optional.
description	ReactNode	—	Optional.
children	ReactNode	—	Required. The field area.
footer	ReactNode	—	The action region below the fields — usually a submit button.
radius	"md" \| "lg" \| "xl" \| "2xl"	"xl"	Corner radius from the shape scale.
padded	boolean	true	Inner content padding.
shadow	"neutral" \| "pink"	"neutral"	Shadow token pair. Structural cards should stay neutral.

Accessibility

Renders a plain <div>, never a <form> — the caller owns the real <form> element, so composing this inside a page that already has one never nests two forms.
Not focusable as a whole; every field inside owns its own label and focus behavior.

Reduced motion

No motion of its own.

When to use

Sign-in/sign-up panels, settings forms, any grouped set of fields with one submit action

When not to use

A single inline field with no surrounding form structure — that doesn't need a card at all