Buttondown logo

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DaisyUI Buttondown Example - Basic</title>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="min-h-screen flex items-center justify-center bg-base-200">
    <div class="card card-bordered card-normal w-full max-w-sm mx-auto p-6 bg-base-100">
      <form
        action="https://buttondown.com/api/emails/embed-subscribe/YOUR-BUTTONDOWN-USERNAME"
        method="post"
      >
        <div class="grid gap-4">
          <div>
            <h3 class="card-title text-2xl">Stay informed</h3>
            <p class="text-sm">
              You'll be the first to know when we launch.
            </p>
          </div>

          <div class="grid gap-2">
            <label for="email" class="label">
              <span class="label-text">Email</span>
            </label>
            <input
              class="input input-bordered w-full"
              id="email"
              name="email"
              type="email"
              placeholder="m@example.com"
              required
            />
          </div>

          <div class="card-actions">
            <button class="btn btn-primary w-full" type="submit">
              Subscribe
            </button>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

With dropdown

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DaisyUI Buttondown Example - Dropdown</title>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body class="min-h-screen flex items-center justify-center bg-base-200">
    <div id="root"></div>

    <script type="text/babel">
      function SubscribeForm() {
        const [language, setLanguage] = React.useState("english");

        return (
          <div className="card card-bordered card-normal w-full max-w-sm mx-auto p-6 bg-base-100">
            <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" className="label">
                    <span className="label-text">Email</span>
                  </label>
                  <input
                    className="input input-bordered w-full"
                    id="email"
                    name="email"
                    type="email"
                    placeholder="m@example.com"
                    required
                  />
                </div>

                <div className="grid gap-2">
                  <input type="hidden" name="tag" value={language} />
                  <label htmlFor="language" className="label">
                    <span className="label-text">Language</span>
                  </label>
                  <select 
                    className="select select-bordered w-full" 
                    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>
        );
      }

      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<SubscribeForm />);
    </script>
  </body>
</html>

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.