Create an account
Fill in the form below to create your account.
OR CONTINUE WITH
Already have an account?
import { SignupBlock } from "@/components/ui/b-signup";
export const BSignupDemo = () => (
<SignupBlock
layout="split"
social={["github"]}
onSignup={(data) => console.log("signup", data)}
onLogin={() => console.log("switch to login")}
/>
);Layouts
Split
Two-column — form on the left, image slot on the right. Hidden on mobile. Default layout.
<SignupBlock
layout="split"
logo={<Logo />}
image={<img src="/hero.jpg" className="h-full w-full object-cover" alt="" />}
/>Card
A centered form inside a rounded card.
<SignupBlock layout="card" />Centered
Full-page without a card wrapper.
<SignupBlock layout="centered" />Social login
<SignupBlock social={["google", "github"]} />Icon-only style
<SignupBlock social={["google", "github"]} socialStyle="icons" />Fields
All fields are shown by default. Toggle them off as needed:
<SignupBlock showName={false} showConfirmPassword={false} />Helper texts
Fields include default helper texts matching the design. Override as needed:
<SignupBlock
emailHelperText="We'll never share your email."
passwordHelperText="Use 8+ characters with a mix of letters and numbers."
confirmPasswordHelperText="Re-enter your password to confirm."
/>Props
Specs
# Mint — Signup Block Specs
## Component
- name: b-signup
- file: registry/mint/b-signup.tsx
- installs to: components/ui/b-signup.tsx
- dependencies: none
- registryDependencies: button, input, label, e-auth
## What is it
A full-page registration block for creating new accounts. Default layout is split
(form left, image right). Includes name, email, password, and confirm password
fields with accessible helper texts. Use b-signup for account creation screens;
pair with b-login for a complete authentication flow.
## Visual identity
Mint's fresh green palette. Split layout uses --muted for the image panel. Form
is centred within the left column with a maximum width of max-w-sm. Helper texts
render in --muted-foreground at text-xs for clear visual hierarchy below inputs.
## Design tokens
--background: oklch(1 0 0) / oklch(0.145 0 0) — page background
--muted: oklch(0.96 0.02 155) / oklch(0.2 0.03 155) — image panel (split layout)
--muted-foreground: oklch(0.52 0.06 155) / oklch(0.6 0.06 155) — helper text, footer text
--card: oklch(1 0 0) / oklch(0.205 0 0) — card surface (card layout)
--border: oklch(0.88 0.04 155 / 60%) / oklch(0.32 0.05 155 / 40%) — card border
## Sub-components
- SignupBlock → root; drives layout; data-slot="signup-block" data-layout="[layout]"
- SignupForm → internal form; not exported
- AuthHeader → from e-auth: logo + "Create an account" heading + description
- AuthSocial → from e-auth: social provider buttons or icons
- AuthDivider → from e-auth: "OR CONTINUE WITH" separator
- AuthFooter → from e-auth: "Already have an account? Sign in" switch link
## Variants
- split → two-column grid; form left, image right (hidden on mobile); default
- card → centred max-w-sm card with rounded-xl border and shadow-sm
- centered → full-page flex, no card wrapper
## States
- submit: calls onSignup with { name?, email, password, confirmPassword? }
- social button: calls onSocialLogin(provider)
- login switch: calls onLogin or navigates to loginHref
## Conventions
- Blocks use the b- prefix; pair b-signup with b-login for a full auth flow
- Provide either onX callbacks (SPA) or xHref props (multi-page) — not both
- Helper text defaults match Figma design; pass empty string "" to hide them
- The image slot in split layout is optional — panel shows bg-muted when empty
- social prop order determines render orderInstallation
GIN Design Plugin$ npx shadcn add https://gin-design.vercel.app/b-signup