page templates

<tc-block-signup>

A ready-made registration page — brand panel plus a name/email/password form that emits the submitted values.

import "@ra9/tan-compose-kit/blocks/signup"

Props

Name	Type	Default	Description
`brand`	`string`	`"Acme"`	Brand wordmark shown in the side panel.
`headline`	`string`	`"Everything your team needs, in one place."`	Marketing headline in the side panel.
`features`	`string[] (json)`	`[…3 defaults]`	Bullet list rendered in the side panel.
`title`	`string`	`"Create your account"`	Form heading.
`subtitle`	`string`	`"Start your free trial — no credit card required."`	Text under the form heading.
`nameLabel`	`string`	`"Full name"`	Label for the name field.
`emailLabel`	`string`	`"Email"`	Label for the email field.
`passwordLabel`	`string`	`"Password"`	Label for the password field.
`termsLabel`	`string`	`"I agree to the Terms of Service and Privacy Policy."`	Label for the terms checkbox.
`submitLabel`	`string`	`"Create account"`	Submit button text.
`loginLabel`	`string`	`"Already have an account?"`	Text before the sign-in link in the footer.
`loginHref`	`string`	`"#"`	Href of the sign-in link.

Events

Event	Detail	When
`tc-block-signup-submit`	`{ values: { name, email, password, terms } }`	Fires when the form is submitted. Informational only.

Slots

Slot	Description
`side`	Replaces the entire left brand panel.
`footer`	Content below the submit button, e.g. a sign-in link.

CSS variables

Variable	Default	Description
`--tc-block-side-bg`	`var(--tc-color-surface, #ffffff)`	Side panel background.
`--tc-block-side-fg`	`var(--tc-color-ink, #14171f)`	Side panel text color.
`--tc-block-side-soft`	`var(--tc-color-ink-soft, #4a5061)`	Side panel secondary text.
`--tc-block-surface`	`var(--tc-color-surface, #ffffff)`	Form panel background.
`--tc-block-rule`	`var(--tc-color-rule, #ece5d3)`	Border color.
`--tc-block-radius`	`var(--tc-radius-lg, 12px)`	Corner radius for form controls.
`--tc-block-shadow`	`var(--tc-shadow-md, …)`	Card shadow.
`--tc-block-font`	`var(--tc-font-sans, …)`	Font family.

Examples

<tc-block-signup> mirrors <tc-block-login>'s layout but collects name, email, password, and a terms-consent flag. The fields are real form-associated tc-input / tc-checkbox elements, but the block keeps submission out of the DOM and routes it through one event.

Basic usage

<tc-block-signup brand="Acme"></tc-block-signup>

import "@ra9/tan-compose-kit/blocks/signup"; document.querySelector("tc-block-signup").addEventListener( "tc-block-signup-submit", (e) => { const { name, email, password, terms } = e.detail.values; // createAccount({ name, email, password, terms }) }, );

Custom copy

<tc-block-signup title="Join Northwind" submit-label="Start my trial" login-href="/login" ></tc-block-signup>

The blocks demo previews all five page templates with a switcher, including this one.

← All components