Login Form

Preview

Installation

npx visor add --block login-form

This copies files into your project:

• blocks/login-form/login-form.tsx — the block component
• blocks/login-form/login-form.module.css — the styles

Usage

import { LoginForm } from '@/blocks/login-form/login-form';

export default function LoginPage() {
  return <LoginForm />;
}

Composition

This block composes four Visor primitives:

• Card — Container with surface styling and border
• Input — Theme-aware text inputs
• Label — Accessible form labels
• Button — Primary action button

About Blocks

Blocks are complete UI patterns made up of multiple Visor components. Unlike individual components, blocks represent larger, composed sections of UI — such as login forms, settings pages, or dashboard panels.

Blocks are copy-and-own, just like components. Install them into your project and customize freely.