# StofliUI

<p>Una biblioteca de componentes React UI rápida, moderna y fácil de utilizar para todos tus proyectos web. <strong>Optimizada para rendimiento, accesibilidad y personalización.</strong> Con Tailwind CSS y Framer Motion.</p>
<div align="center">
  <img src="https://github.com/stt0k/StofliUI/blob/main/public/home.png" alt="StofliUI Logo" />
  
  <p></p>
  <div align="center">
    <img src="https://img.shields.io/badge/Vercel-000?logo=vercel&logoColor=fff&style=flat" alt="Vercel Badge" />
    <img src="https://img.shields.io/badge/Tailwind%20CSS-06B6D4?logo=tailwindcss&logoColor=fff&style=flat" alt="Tailwind CSS Badge" />
    <img src="https://img.shields.io/badge/NextJs-000000?style=flat&logo=next.js&logoColor=white" alt="Next.js Badge" />
    <a href="https://www.npmjs.com/package/stofli-ui">
      <img src="https://img.shields.io/npm/v/stofli-ui" alt="Versión npm" />
    </a>
    <a href="https://github.com/stt0k/StofliUI/blob/main/LICENSE">
      <img src="https://img.shields.io/github/license/username/stofli-ui" alt="Licencia MIT" />
    </a>
  </div>
</div>

## 🚀 Primeros Pasos

Aprende cómo empezar a usar StofliUI en nuestra [guía de introducción](https://stofli-ui.vercel.app/docs/introduccion).

## 📝 Documentación

Visita https://stofli-ui.vercel.app/docs para ver la documentación completa.

## 🧩 Componentes

StofliUI incluye los siguientes componentes:

- **Accordion** - Paneles plegables para organizar contenido
- **Autocomplete** - Campos de texto con sugerencias automáticas
- **Avatar** - Representaciones visuales de usuarios
- **Badge** - Indicadores numéricos o de estado
- **Breadcrumbs** - Navegación jerárquica
- **Button** - Botones personalizables con múltiples variantes
- **Calendar** - Calendarios interactivos con soporte para múltiples sistemas
- **Card** - Tarjetas versátiles para presentar contenido
- **Checkbox** - Casillas de verificación estilizadas y animadas
- **Circular-progress** - Indicadores circulares de progreso
- **Date-picker** - Selectores de fecha avanzados
- **Dropdown** - Menús desplegables elegantes
- **Input** - Campos de entrada con validación
- **Number-input** - Campos numéricos con controles incrementales
- **Pagination** - Controles de paginación 
- **Progress** - Barras de progreso lineales
- **Spinner** - Indicadores de carga animados
- **Switch** - Interruptores tipo toggle
- **Tabs** - Pestañas interactivas con animaciones fluidas
- **Toast** - Notificaciones elegantes y accesibles
- **Tooltip** - Información contextual en elementos al pasar el cursor

Cada componente incluye:
- Múltiples variantes (default, primary, secondary, success, warning, danger)
- Opciones de tamaño (sm, md, lg)
- Personalización completa de estilo mediante props
- Compatibilidad total con Tailwind CSS
- Animaciones con Framer Motion

## 🤝 Contribuciones

¡Las contribuciones son bienvenidas! Si deseas contribuir a StofliUI:

1. Revisa las [issues abiertas](https://github.com/stt0k/StofliUI/issues) o crea una nueva
2. Haz fork del repositorio
3. Crea una rama para tu feature (`git checkout -b feature/amazing-feature`)
4. Realiza tus cambios
5. Haz commit de tus cambios (`git commit -m 'Add some amazing feature'`)
6. Haz push a la rama (`git push origin feature/amazing-feature`)
7. Abre un Pull Request

Para más detalles, consulta nuestra [guía de contribución](https://github.com/stt0k/StofliUI/blob/main/CONTRIBUTING.md).

## 📄 Licencia

[MIT](https://choosealicense.com/licenses/mit/)