Shadcn-style components

The shadcn/ui look recreated with plain CSS — no build step, works in any CDN context. Anatomy ids mirror the slot names shadcn users know.

Card — with form field and actions

Deploy your new project in one click.

Name

Cardcard

The outer container. rounded-lg border bg-card shadow-sm in Tailwind terms.

Headercard-header

Groups title and description with vertical spacing.

Titlecard-title

The heading. Semantic <h3>, font-semibold tracking-tight.

Descriptioncard-description

Muted supporting copy under the title.

Contentcard-content

The main body — here a form field.

Footercard-footer

Action row, typically right-aligned buttons.

Button — default variant with icon

Buttonbutton

shadcn-style default variant: solid foreground, rounded-md, h-9 px-4.

Iconbutton-icon

Optional 16px leading icon, aria-hidden.