stofli-ui
Version:
Biblioteca moderna de componentes UI para React con Tailwind CSS y Framer Motion
82 lines (62 loc) • 3.61 kB
Markdown
# 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/)