NotifyMorph

Installation

Registry — recommended

Copies the component into your configured shadcn UI directory and installs Motion.

npx shadcn@latest add https://suluu.site/r/notify-morph.json

npm package

For centralized upgrades, install the optional ESM package and configure Tailwind source detection as shown below.

pnpm add suluu motion

Usage

Submission is intentionally callback-only. Your application owns success, error, clearing, and collapse behavior.

Registry

import { NotifyMorph } from "@/components/ui/notify-morph"

export function Updates() {
  return (
    <NotifyMorph
      onSubmit={(email) => subscribe(email)}
    />
  )
}

npm

// app/globals.css
@import "suluu/styles.css";
@source "../node_modules/suluu/dist";

// component.tsx
import { NotifyMorph } from "suluu/notify-morph"

export function Updates() {
  return <NotifyMorph onSubmit={(email) => subscribe(email)} />
}

In context

The expanding form keeps a waitlist invitation compact until someone chooses to respond.

Early access

The next release is taking shape.

Join the quiet list. One note when it is ready, nothing in between.

Props

NotifyMorph also accepts safe native form attributes and forwards its ref to the form element.

Prop	Type	Default	Description
label	string	"Notify Me"	CTA text in both states.
placeholder	string	"Email"	Email input placeholder.
className	string	—	Class name applied to the form.
collapseOnBlur	boolean	true	Collapse when focus leaves the widget.
disabled	boolean	false	Disable every interactive control.
value	string	—	Controlled email value.
defaultValue	string	""	Initial uncontrolled email value.
onValueChange	(value) => void	—	Runs when the input changes.
expanded	boolean	—	Controlled expansion state.
defaultExpanded	boolean	false	Initial uncontrolled expansion state.
onExpandedChange	(expanded) => void	—	Runs for expansion requests.
motionIntensity	"subtle" \| "default" \| "expressive"	"default"	Animation character.
successMessage	(email) => string	Built in	Builds the liquid confirmation text.
successDuration	number	3000	Confirmation lifetime in milliseconds.
onSubmit	(email, event) => void	—	Runs only for a valid email.

Theming

Override these variables in your light and dark theme scopes. The registry installs the defaults automatically.

--suluu-notify-backgroundContainer and input surface.

--suluu-notify-foregroundPrimary text and icon.

--suluu-notify-mutedPlaceholder text.

--suluu-notify-borderContainer border.

--suluu-notify-hoverCollapsed CTA hover surface.

--suluu-notify-accentExpanded submit button.

--suluu-notify-accent-foregroundSubmit button content.

--suluu-notify-ringKeyboard focus ring.

--suluu-notify-shadowExpanded action button shadow.

--suluu-notify-success-backgroundLiquid confirmation surface.

--suluu-notify-success-foregroundConfirmation text.

--suluu-notify-success-borderConfirmation glass edge.

--suluu-notify-success-shadowConfirmation depth and glow.

Accessibility

The trigger and submit actions are native buttons. Expansion moves focus to the email field, Escape collapses and restores focus, native email validation blocks invalid submissions, and reduced motion removes spatial animation.

The confirmation is announced politely without stealing focus. Keep the visible label descriptive, preserve sufficient contrast when overriding theme variables, and pair server-side errors with an equally clear live message in your application.

Preview