Astro Minimum Theme

A lightweight, beginner-friendly starter theme for Astro with TailwindCSS and DaisyUI.
It’s designed as a simple yet structured learning template that helps you understand how to build responsive Astro sites with a sidebar layout, clear component separation, and customizable design.

🚀 Features

• 📱 Responsive layout with a left-side navigation sidebar
• 🎨 Built with TailwindCSS and includes DaisyUI components for rapid UI development
• 🧩 Modular structure with components for Header, Sidebar, Footer, and Breadcrumbs
• 🔍 Search overlay UI included (customizable — add your own logic with Pagefind, Algolia, or similar)
• 🌗 Dark/Light mode ready (with mode toggle icons included)
• 🧱 Clean, minimal, and easy-to-understand code — ideal for beginners exploring Astro, Tailwind, and DaisyUI

🛠️ Installation

# Clone the repository
git clone https://github.com/sehnot/astro-minimum-theme.git
cd astro-minimum-theme

# Install dependencies
npm install

# Run the dev server
npm run dev

Then open http://localhost:4321 (default Astro port) in your browser.

🎨 Customization

Background Colors

The theme uses bright background colors to help visualize the layout:

• Sidebar
• Header
• Footer
• Breadcrumbs

You can easily change these colors by editing the Tailwind utility classes (e.g. bg-blue-500, bg-green-400, etc.) in each component.
Use your own Tailwind or DaisyUI color utilities, or remove them entirely for a neutral design.

DaisyUI Integration

DaisyUI is preinstalled and ready to use.
It extends TailwindCSS with a powerful set of accessible and styled UI components — buttons, cards, modals, etc.
You can view an example on the /daisyui page, which demonstrates how DaisyUI elements can be combined with Astro layouts.

For more information, visit https://daisyui.com/.

Search Overlay

The search overlay opens visually when triggered via the search icon.
To make it functional, connect your preferred search solution such as:

• Pagefind
• Algolia
• Lunr.js

Dark/Light Mode

The theme includes mode icons and placeholder logic for theme switching.
You can extend this behavior with localStorage or Astro state handling for persistent theme preferences.

💡 Example Pages

Page	Description
/	Default index page
/colors	Explains the colors used in the theme
/daisyui	Demo page showing DaisyUI components
/nobreadcrumbs	Example page without breadcrumbs
/pages	Example page with breadcrumbs navigation
/tailwind	Page showing Tailwind examples

🧠 Perfect For

• Astro beginners learning the basics of layout and component structure
• Small documentation or portfolio sites
• Developers exploring TailwindCSS and DaisyUI within Astro
• Quick prototyping of layouts with visual guidance

📄 License

MIT License © 2025 sehnot

🌐 Live Demo

👉 See Github Pages