Buttondown Documentation

Buttondown Documentation

© 2016–2025 Buttondown LLC.

TwitterGitHubLinkedInMastodonBlueskyFacebook

Integrating daisyUI

Overview

daisyUI is a plugin for Tailwind CSS that offers out-of-the-box components for your app.

It's customizable, themeable, and great for adding a newsletter subscription form to your website.

Getting started

To use the examples below, first install daisyUI:

npm i -D daisyui@latest

Then, add daisyUI as a plugin to your Tailwind config tailwind.config.js:

module.exports = {
  // ...
  plugins: [
    require('daisyui'),
  ],
}

You're now ready to use the examples!

info

In the examples, remember to replace YOUR-BUTTONDOWN-USERNAME with your actual username.

Basic example

export default function SubscribeForm() {
  return (
    <div className="card card-bordered card-normal w-full max-w-sm mx-auto p-6">
      <form
        action="
      https://buttondown.com/api/emails/embed-subscribe/YOUR-BUTTONDOWN-USERNAME
      "
        method="post"
      >
        <div className="grid gap-4">
          <div>
            <h3 className="card-title text-2xl">Stay informed</h3>
            <p className="text-sm">
              You'll be the first to know when we launch.
            </p>
          </div>

          <div className="grid gap-2">
            <label htmlFor="email">Email</label>
            <input
              className="input input-bordered"
              id="email"
              type="email"
              placeholder="m@example.com"
              required
            />
          </div>

          <div className="card-actions">
            <button className="btn btn-primary w-full" type="submit">
              Subscribe
            </button>
          </div>
        </div>
      </form>
    </div>
  );
}

Stay informed

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

With dropdown

"use client";

import { useState } from "react";

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

  return (
    <div className="card card-bordered card-normal w-full max-w-sm mx-auto p-6">
      <form
        action="
      https://buttondown.com/api/emails/embed-subscribe/YOUR-BUTTONDOWN-USERNAME
      "
        method="post"
      >
        <div className="grid gap-4">
          <div>
            <h3 className="card-title text-2xl">Stay informed</h3>
            <p className="text-sm">
              You'll be the first to know when we launch.
            </p>
          </div>

          <div className="grid gap-2">
            <label htmlFor="email">Email</label>
            <input
              className="input input-bordered"
              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 className="select select-bordered" value={language} onChange={(e) => setLanguage(e.target.value)}>
              <option value="english">English</option>
              <option value="french">French</option>
              <option value="spanish">Spanish</option>
            </select>
          </div>

          <div className="card-actions">
            <button className="btn btn-primary w-full" type="submit">
              {language === "english"
                ? "Subscribe"
                : language === "french"
                  ? "S'abonner"
                  : "Suscribirse"}
            </button>
          </div>
        </div>
      </form>
    </div>
  );
}

Stay informed

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

Going further

The examples above provide a good starting point for integrating Buttondown with daisyUI.

You can tailor them further with daisyUI's theme, color, and custom component options.

© 2016–2025 Buttondown LLC.

TwitterGitHubLinkedInMastodonBlueskyFacebook