Buttondown Documentation

Buttondown Documentation

© 2016–2025 Buttondown LLC.

TwitterGitHubLinkedInMastodonBlueskyFacebook

Integrating shadcn/ui

Overview

shadcn/ui is a collection of re-usable components that you can copy and paste into your apps. You can install different shadcn/ui components and use them to create a subscription component for your newsletter.

Getting started

To use the examples below, you'll need to install the Card, Button, Input, and Label components:

npx shadcn-ui@latest add button card input label

You may notice that we do not install the Form component. That's intentional; shadcn's form boilerplate pulls in React Hook Form and Zod, both of which are great libraries but overkill for simple subscription forms. If you've already installed them and want to use them, you can, but use the URL shown in the examples below for the action prop of Form.

Basic example

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function SubscribeForm() {
  return (
    <Card className="w-full max-w-sm mx-auto">
      <form
        action="
      https://buttondown.com/api/emails/embed-subscribe/YOUR-BUTTONDOWN-USERNAME
      "
        method="post"
      >
        <CardHeader>
          <CardTitle className="text-2xl">Stay informed</CardTitle>
          <CardDescription>
            You'll be the first to know when we launch.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              placeholder="m@example.com"
              required
            />
          </div>
        </CardContent>
        <CardFooter>
          <Button className="w-full" type="submit">
            Subscribe
          </Button>
        </CardFooter>
      </form>
    </Card>
  );
}

Stay informed

You'll be the first to know when we launch.

With dropdown

"use client";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useState } from "react";

export default function SubscribeForm() {
  const [language, setLanguage] = useState("english");

  return (
    <Card className="w-full max-w-sm mx-auto shadow-md">
      <form
        action="
      https://buttondown.com/api/emails/embed-subscribe/YOUR-BUTTONDOWN-USERNAME
      "
        method="post"
      >
        <CardHeader>
          <CardTitle className="text-2xl">Stay informed</CardTitle>
          <CardDescription>
            You'll be the first to know when we launch.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              placeholder="m@example.com"
              required
            />
          </div>

          <div className="grid gap-2">
            <input type="hidden" name="tag" value={language} />
            <Label htmlFor="language">Language</Label>
            <Select defaultValue="english" onValueChange={setLanguage}>
              <SelectTrigger>
                <SelectValue placeholder="Language" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="english">English</SelectItem>
                <SelectItem value="french">French</SelectItem>
                <SelectItem value="spanish">Spanish</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
        <CardFooter>
          <Button className="w-full" type="submit">
            {language === "english"
              ? "Subscribe"
              : language === "french"
                ? "S'abonner"
                : "Suscribirse"}
          </Button>
        </CardFooter>
      </form>
    </Card>
  );
}

Stay informed

You'll be the first to know when we launch.

© 2016–2025 Buttondown LLC.

TwitterGitHubLinkedInMastodonBlueskyFacebook