ShipFast Docs

Appearance

Button Components ​

ShipFast includes purpose-built button components for common SaaS actions.

ButtonLead ​

Collects email addresses for a waitlist or lead list. Saves to database via /api/lead/route.js.

javascript
import ButtonLead from "@/components/ButtonLead";

// Standard usage (Hero, CTA)
<ButtonLead />

// Full-width variant (Pricing section)
<ButtonLead extraStyle="!max-w-none !w-full" />

Requires: database configured, /api/lead/route.js uncommented.

ButtonCheckout ​

Triggers a Stripe checkout session. Supports subscriptions and one-time payments.

javascript
import ButtonCheckout from "@/components/ButtonCheckout";
import config from "@/config";

// Subscription
<ButtonCheckout
  mode="subscription"
  priceId={config.stripe.plans[0].priceId}
/>

// One-time payment
<ButtonCheckout
  mode="payment"
  priceId={config.stripe.plans[0].priceId}
/>

ButtonSignin ​

Triggers NextAuth sign-in flow.

javascript
import ButtonSignin from "@/components/ButtonSignin";

<ButtonSignin />

Redirects to config.auth.callbackUrl after successful login.

ButtonAccount ​

Opens the Stripe Customer Portal — lets users cancel subscriptions, update payment methods, and view invoices.

javascript
import ButtonAccount from "@/components/ButtonAccount";

<ButtonAccount />

Requires: Stripe configured, user has an active subscription.

ButtonGradient ​

A gradient-styled decorative button for visual emphasis.

javascript
import ButtonGradient from "@/components/ButtonGradient";

<ButtonGradient>Get Started</ButtonGradient>

ButtonPopover ​

A button that reveals a popover with additional content on click.

javascript
import ButtonPopover from "@/components/ButtonPopover";

<ButtonPopover>Learn more</ButtonPopover>

daisyUI Button Utilities ​

For simple unstyled buttons, use daisyUI classes directly:

javascript
<button className="btn btn-primary">Primary</button>
<button className="btn btn-secondary">Secondary</button>
<button className="btn btn-outline">Outline</button>
<button className="btn btn-ghost">Ghost</button>

See Also ​