FichapUI

Una biblioteca de componentes UI personalizados construida sobre HeroUI, diseñada para crear interfaces modernas y atractivas.

Instalación

Para instalar FichapUI, ejecuta uno de los siguientes comandos en tu terminal:

# Con npm
npm install fichapui framer-motion

# Con pnpm
pnpm add fichapui framer-motion

# Con yarn
yarn add fichapui framer-motion

Características

• 🎨 Personalizable: Tema personalizable para adaptarse a tu marca
• 🚀 Moderno: Construido con React 18+ y TypeScript
• 📦 Modular: Utiliza solo los componentes que necesitas
• 🧩 Extensible: Fácil de extender y personalizar
• 📱 Responsive: Diseñado para funcionar en todos los tamaños de pantalla

Uso básico

import { FichapUIProvider, Button, Card, Input } from 'fichapui';

function App() {
  return (
    <FichapUIProvider>
      <Card>
        <h1>Hello from FichapUI</h1>
        <Input label="Username" placeholder="Enter your username" />
        <Button color="primary">Submit</Button>
      </Card>
    </FichapUIProvider>
  );
}

Componentes disponibles

CardStats

El componente CardStats es ideal para mostrar métricas y estadísticas en un formato visualmente atractivo.

import { CardStats } from 'fichapui';

function StatsExample() {
  return (
    <CardStats
      title="Usuarios activos"
      value="2,453"
      trend={12}
      trendLabel="vs mes anterior"
      icon="users"
      color="blue"
    />
  );
}

FichapCarousel

Un carrusel de imágenes personalizable con múltiples opciones de animación.

import { FichapCarousel } from 'fichapui';

function CarouselExample() {
  const slides = [
    { id: 1, content: <img src="/slide1.jpg" alt="Slide 1" /> },
    { id: 2, content: <img src="/slide2.jpg" alt="Slide 2" /> },
    { id: 3, content: <img src="/slide3.jpg" alt="Slide 3" /> },
  ];

  return (
    <FichapCarousel
      slides={slides}
      autoPlay={true}
      interval={5000}
      animation="slide"
    />
  );
}

Personalización del tema

Puedes personalizar el tema de FichapUI utilizando el proveedor de tema:

import { FichapUIProvider } from 'fichapui';

const myTheme = {
  colors: {
    primary: '#3B82F6',
    secondary: '#10B981',
    // ... más colores personalizados
  },
  // ... más personalizaciones
};

function App() {
  return (
    <FichapUIProvider theme={myTheme}>
      {/* Tu aplicación aquí */}
    </FichapUIProvider>
  );
}

Dependencias

Esta biblioteca requiere las siguientes dependencias:

• React 18 o superior
• React DOM 18 o superior
• HeroUI 2.7.0 o superior

Desarrollo

Para contribuir al desarrollo de FichapUI:

# Clonar el repositorio
git clone https://github.com/yourusername/fichap-ui.git

# Instalar dependencias
pnpm install

# Iniciar Storybook para desarrollo
pnpm storybook

Licencia

MIT