Reference

DaisyUI starter patterns developers can actually reuse.

This page is not a component gallery. It is a small set of starter-grade patterns built from DaisyUI and Tailwind primitives that developers can copy, adapt, and remix inside real Astro projects.

How to use this page

Start from the section closest to your use case.
Copy the markup from the page source, then simplify it for your project.
Prefer DaisyUI classes first, Tailwind layout utilities second, and custom CSS last.

Buttons and grouped actions

Use DaisyUI buttons for the main action language of the starter. `join` is especially useful when you want grouped actions without building custom button bars.

btnjoinbadgemockup-code

Call-to-action group

Good default for hero sections, feature pages, or article headers where one action leads and the rest support it.

<button class="btn btn-primary">Start project</button>

<div class="join"><button class="btn join-item">…</button></div>

Alerts and feedback states

DaisyUI alerts cover status messaging without extra wrappers. Use vertical-on-mobile alert layouts when actions and descriptions need to stay readable on narrow screens.

alertbtnbadgemockup-code

Info

New message

You have one unread update in the release checklist.

Deployment completed successfully.

Replace placeholder legal text before going live.

<div role="alert" class="alert alert-info alert-vertical sm:alert-horizontal">

  <button class="btn btn-sm">Open</button>

</div>

Cards and stats

Cards and stats are a strong default pair for pricing, feature summaries, changelogs, dashboards, and launch pages. Keep the layout simple and let DaisyUI provide the structure.

cardcard-bodycard-actionsstatsstatbadge

Starter launch checklist

A reusable card pattern for roadmap, release, or feature summary sections.

Recommended

Set the production URL in `astro.config.mjs`
Replace placeholder legal and metadata content
Ship a first post or delete the blog collection

Pages

Useful starter routes out of the box

UI layer

DaisyUI

Default component language

Client JS

Light

Alpine only where needed

Navigation patterns

Use DaisyUI navigation primitives when you need secondary structure inside a page or dashboard area. Menu, tabs, and breadcrumbs cover most starter-level navigation needs without custom components.

menutabstabbreadcrumbs

Dashboard
Content
Overview

Overview Checklist Notes

Good default for content dashboards

Combine a `menu` for persistent structure with `tabs` for local switching inside a section.

<fieldset class="fieldset">

  <input class="input w-full" />

  <select class="select w-full">…</select>

  <textarea class="textarea h-24 w-full"></textarea>

</fieldset>