Welcome to Dragonfly UI ​

Dragonfly UI is a modern, flexible CSS framework designed to help developers build beautiful, accessible, and responsive user interfaces with ease. Whether you're creating a simple website or a complex web application, Dragonfly UI provides the tools you need to create outstanding user experiences.

Why Choose Dragonfly UI? ​

🚀 Performance Focused ​

Built with modern CSS features and optimized for Lightning CSS, Dragonfly UI delivers exceptional performance without sacrificing functionality.

📱 Mobile First & Responsive ​

Every component is designed mobile-first with responsive breakpoints and container queries for optimal display across all devices.

🎨 Highly Customizable ​

Extensive theming system with CSS custom properties, multiple built-in themes, and easy brand customization.

🛠️ Developer Friendly ​

Comprehensive documentation, TypeScript support, and excellent integration with modern frameworks like React, Vue, and Astro.

Quick Start ​

Get up and running with Dragonfly UI in minutes:

# Install via npm
npm install @casoon/dragonfly

# Or via yarn
yarn add @casoon/dragonfly

# Or via pnpm
pnpm add @casoon/dragonfly

/* Import the core styles */
@import '@casoon/dragonfly/core.css';

/* Add a theme */
@import '@casoon/dragonfly/themes/day.css';

<!-- Start building with components -->
<div class="theme-day">
  <div class="container">
    <h1 class="text-3xl font-bold mb-4">Hello Dragonfly!</h1>
    <button class="button button--primary">Get Started</button>
  </div>
</div>

What's Included ​

Framework Integration ​

Dragonfly UI works seamlessly with your favorite frameworks:

React ​

import '@casoon/dragonfly/core.css';
import '@casoon/dragonfly/themes/day.css';

function App() {
  return (
    <div className="theme-day">
      <button className="button button--primary">
        Click me!
      </button>
    </div>
  );
}

Vue.js ​

<template>
  <div class="theme-day">
    <button class="button button--primary">
      Click me!
    </button>
  </div>
</template>

<script setup>
import '@casoon/dragonfly/core.css';
import '@casoon/dragonfly/themes/day.css';
</script>

Astro ​

---
import '@casoon/dragonfly/core.css';
import '@casoon/dragonfly/themes/day.css';
---

<div class="theme-day">
  <button class="button button--primary">
    Click me!
  </button>
</div>

Architecture Highlights ​

🏗️ Layer-Based CSS Architecture ​

Dragonfly UI uses CSS @layer to ensure predictable specificity and easy customization:

@layer reset, tokens, core, layout, typography,
       utilities, components, effects, themes;

🎯 Container Queries ​

Modern responsive design with container queries for component-based responsiveness:

@container (min-width: 30rem) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

🎨 Design Tokens ​

Consistent design with CSS custom properties:

:root {
  --color-primary: #e72779;
  --space-4: 1rem;
  --radius-md: 0.375rem;
}

Browser Support ​

Dragonfly UI supports all modern browsers:

• Chrome 88+
• Firefox 89+
• Safari 14+
• Edge 88+

For older browsers, we provide graceful fallbacks to ensure your content remains accessible.

Community & Support ​

🐛 Found a Bug? ​

Report issues on our GitHub repository.

💡 Feature Requests ​

We'd love to hear your ideas! Share them in our discussions.

📖 Documentation ​

This documentation is open source. Help us improve it by contributing.

🤝 Contributing ​

Check out our contribution guidelines to get started.

What's Next? ​