Skip to main content

DaisyUI na Luminus UI

Introdução​

A biblioteca Luminus UI integra o DaisyUI versão 4.12.2 como um plugin do Tailwind CSS, oferecendo componentes pré-estilizados e um sistema de design consistente. O DaisyUI é uma biblioteca de componentes que funciona como uma extensão do Tailwind CSS, fornecendo classes utilitárias adicionais para criar interfaces modernas e acessíveis.

O que é o DaisyUI?​

O DaisyUI é uma biblioteca de componentes CSS que:

  • Estende o Tailwind CSS com componentes pré-construídos
  • Oferece temas prontos com cores e estilos consistentes
  • Mantém a acessibilidade como prioridade
  • Reduz o CSS customizado necessário
  • Funciona sem JavaScript - apenas CSS puro

Componentes Disponíveis​

A biblioteca Luminus UI oferece uma ampla variedade de componentes que aproveitam o DaisyUI:

Categorias de Componentes​

📱 Basic

  • View, Text, Image, Video, Markdown, Page

🎨 Display

  • Accordion, Avatar, Badge, Card, Carousel, Swiper
  • Chat, Collapse, Countdown, Lottie, Stats
  • Tab, Timeline, Diff, Kbd, List, Code

⌨️ Input

  • Button, Checkbox, Dropdown, OTPInput, PullToAction
  • Radio, Range, Rating, Select, TextInput, Textarea
  • Toggle, Swap, FileInput, FormControl

💬 Feedback

  • Alert, Progress, Skeleton, Toast, Tooltip, Loading

🏗️ Layout

  • Hero, Indicator, Mask, Stack, Divider, Stories, Artboard

🧭 Navigation

  • Breadcrumbs, Modal, Steps

🔧 Others

  • HTMLRenderer, Webview, QRCode, Fullscreen

Luminus UI

Vantagens da Integração​

1. Desenvolvimento Rápido​

  • Componentes prontos para uso
  • Menos tempo escrevendo CSS customizado
  • Prototipagem acelerada

2. Consistência Visual​

  • Sistema de design unificado
  • Cores e espaçamentos padronizados
  • Componentes que se complementam

3. Temas Flexíveis​

  • Múltiplos temas disponíveis
  • Customização de temas
  • Suporte a modo escuro

4. Performance​

  • Estilo otimizado
  • Apenas os estilos necessários são incluídos
  • Build final enxuto

Uso com Componentes Luminus UI​

Exemplo de Integração​

import { Card, Button, Text, View } from 'eitri-app-components';

// Usando classes do DaisyUI com componentes Luminus UI
<Card className="card bg-base-100 shadow-xl">
  <View className="card-body">
    <Text className="card-title">Título do Card</Text>
    <Text>Conteúdo do card usando DaisyUI</Text>
    <View className="card-actions justify-end">
      <Button className="btn btn-primary">Ação</Button>
    </View>
  </View>
</Card>

Classes Comuns do DaisyUI​

  • Cores: btn-primary, btn-secondary, btn-accent
  • Estados: btn-outline, btn-ghost, btn-link
  • Tamanhos: btn-sm, btn-lg
  • Layout: card, card-body, card-actions
  • Feedback: alert, alert-info, alert-success

Luminus UI

Boas Práticas​

1. Preferir Componentes Luminus UI​

  • Pela plataforma Eitri só é possível utilizar os componentes de Luminus UI
  • Aproveite as props específicas de cada componente

2. Combinar Classes Inteligentemente​

  • Use classes do DaisyUI para estilos base
  • Combine com classes do Tailwind para customizações
  • Evite conflitos entre as duas bibliotecas

3. Manter Acessibilidade​

  • Use componentes que já são acessíveis
  • Verifique contraste de cores

4. Otimizar Performance​

  • Evite classes desnecessárias
  • Use o sistema de temas do DaisyUI
  • Aproveite a purgação do Tailwind

Recursos Adicionais​

Luminus UI

Conclusão​

A integração do DaisyUI com a Luminus UI oferece uma solução completa para desenvolvimento de interfaces modernas. Você obtém:

  • Componentes prontos e acessíveis
  • Sistema de design consistente
  • Flexibilidade para customização
  • Performance otimizada
  • Produtividade aumentada

Esta combinação permite criar suas telas com Eitri de forma rápida, fácil e segura.