Skip to content
Get Pro
Sections

Signup

A closing section: a headline, a line, and one email pill with its button inside.

$149 once · every Pro piece

Customize

Errors show inline and clear the moment the address is fixed. On submit the button's bone face closes into a spinner, then draws a check; a warm pulse crosses the field and a few sparks come off it and fall away.

Install

npx shadcn@latest add @obsyde/signup

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Signup } from '@/components/obsyde/ember/signup/Signup';

export function Example() {
  return (
    <Signup buttonLabel="Subscribe" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/signup/Signup.tsxcomponent
  • ember/signup/signup-demo.cssstyles
  • ember/signup/signup.cssstyles
  • ember/signup/SignupDemo.tsxdemo
  • ember/blocks-kit/SparkBurst.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/spring.tsshared
  • ember/blocks-kit/check.cssshared
  • ember/blocks-kit/Check.tsxshared
  • ember/blocks-kit/blocks-kit.cssshared
  • ember/blocks-kit/kit.tsxshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
stateStart as'idle' | 'error' | 'done''idle'
buttonLabelButton labelstring'Subscribe'
delayPretend request (ms)number1200