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.
To use the examples below, first install daisyUI:
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!
infoIn the examples, remember to replace YOUR-BUTTONDOWN-USERNAME with your actual username.
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>
);
}
"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>
);
}
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.