indio-componentes

indio-componentes

A modern React component library with TypeScript, Next.js, and Tailwind CSS support.

Features

✨ TypeScript-first - Full type safety and IntelliSense support 🎨 Tailwind CSS - Utility-first styling with modern design ⚡ Tree-shakeable - Import only what you need 📦 Zero config - Styles are automatically imported 🔧 Flexible - Works with React 18+ and Next.js 14+

Installation

npm install indio-componentes
# or
yarn add indio-componentes
# or
pnpm add indio-componentes

Requirements

• React ≥ 18.0.0
• React DOM ≥ 18.0.0
• Next.js ≥ 14.0.0 (optional)

Usage

Import components directly from the package:

import { ButtonDegradeAnimationElio, TypewriterEffect } from 'indio-componentes';

function App() {
  return (
    <div>
      <TypewriterEffect
        text="Hello World"
        speed={50}
      />
      <ButtonDegradeAnimationElio onClick={() => alert('Clicked!')}>
        Click me
      </ButtonDegradeAnimationElio>
    </div>
  );
}

Available Components

Buttons

• ButtonDegradeAnimationElio - Animated gradient button

Text Animation

• TypewriterEffect - Typewriter text effect

Galleries

• GalleryDynamicElio - Dynamic image gallery
• SliderGallery - Image slider with Swiper

Loaders

• LoaderElio - Loading spinner

Media

• YoutubeIframeElio - YouTube video embed

UI Elements

• ArrowElio - Customizable arrow component

Utilities

The package also exports utility functions:

import { getUnsplashImages, extractMediumUrl, formatDate } from 'indio-componentes';

Styling

CSS is automatically imported when you import components. No additional configuration needed.

If you're using Tailwind CSS in your project, make sure to configure it to scan the library:

// tailwind.config.js
module.exports = {
  content: [
    './node_modules/indio-componentes/dist/**/*.js',
    // ... your other paths
  ],
};

TypeScript

Full TypeScript support is included. Types are automatically imported with components.

License

MIT © Equipo Indio

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

Support

For issues and questions, please visit our GitHub repository.