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!
Note
In the examples, remember to replace {username} with your Buttondown 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/[email protected]/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/{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="[email protected]"
required
/>
</div>
<div class="card-actions">
<button class="btn btn-primary w-full" type="submit">
Subscribe
</button>
</div>
</div>
</form>
</div>
</body>
</html>
Preview
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/[email protected]/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/{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="[email protected]"
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>
Preview
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.
