Amvasdev UI

A comprehensive React component library built with TypeScript, styled with daisyUI and TailwindCSS. Designed for modern React applications with full TypeScript support and customizable theming.

Features

✨ 18+ React Components - Buttons, inputs, modals, dropdowns, calendars, and more 🎨 Full Theme Support - Use any daisyUI theme with built-in theme switching 📘 Full TypeScript Support - Complete type definitions for all components 🎯 TailwindCSS Integration - Custom ui: prefix to prevent style conflicts ♿ Accessible - Built with accessibility in mind 📦 Tree-shakeable - Import only what you need 🔧 Customizable - Extensive props and styling options

Installation

npm install amvasdev-ui

Peer Dependencies:

• React >= 19
• react-dom >= 19

Quick Start

Import the CSS file at the root of your application, then start using components:

import "amvasdev-ui/dist/index.css";
import { Button, Input, Modal } from "amvasdev-ui";

function App() {
  return (
    <div>
      <Button variant="primary" size="lg">
        Click Me
      </Button>
      <Input label="Email" placeholder="Enter your email" />
    </div>
  );
}

Components

Form Components

• Button - Versatile button with variants, sizes, and loading states
• Input - Text input with labels, icons, and validation
• PasswordInput - Password input with show/hide toggle
• Select - Custom dropdown select
• Checkbox - Styled checkbox with variants
• RadioGroup - Radio button groups
• DateInput - Date picker with calendar integration

Display Components

• Badge - Status indicators and labels
• Modal - Flexible dialog system
• ActionModal - Pre-styled confirmation modals
• Tooltip - Contextual tooltips
• Calendar - Date picker calendar
• ColorPalette - Theme preview and selection

Navigation Components

• Dropdown - Customizable dropdown menus
• HamburgerMenu - Mobile-friendly menu
• Breadcrumbs - Navigation breadcrumbs

Interactive Components

• Combobox - Searchable select with autocomplete
• IconButton - Icon-only buttons with tooltips

Utility Components

• Label - Form labels
• ErrorLabel - Error message display

Hooks

• useClosableContainer - Manage closable UI elements
• useThemeChange - Dynamic theme switching
• useEventListener - Event listener management
• useOnClickOutside - Detect outside clicks
• useToggle - Boolean state toggle
• useIsomorphicLayoutEffect - SSR-safe layout effects

Theming

Use any daisyUI theme with the useThemeChange hook:

import { useThemeChange } from "amvasdev-ui";

function ThemeSelector() {
  const { changeTheme } = useThemeChange();

  // You can use any daisyUI theme
  const themes = [
    "light", "dark", "cupcake", "bumblebee", "emerald",
    "corporate", "synthwave", "retro", "cyberpunk", "valentine",
    "halloween", "garden", "forest", "aqua", "lofi",
    "pastel", "fantasy", "wireframe", "black", "luxury",
    "dracula", "cmyk", "autumn", "business", "acid",
    "lemonade", "night", "coffee", "winter", "dim",
    "nord", "sunset"
  ];

  return (
    <select onChange={(e) => changeTheme(e.target.value)}>
      {themes.map((theme) => (
        <option key={theme} value={theme}>
          {theme}
        </option>
      ))}
    </select>
  );
}

See all available themes at daisyUI themes

Documentation

For comprehensive component documentation, usage examples, and API reference:

📖 Component Usage Guide

TypeScript

All components are fully typed with comprehensive type exports:

import type {
  ButtonProps,
  InputProps,
  ModalProps,
  BadgeVariant,
  SelectOption,
} from "amvasdev-ui";

Credits

This library is built with and styled by:

• daisyUI - Component classes and theming system
• TailwindCSS - Utility-first CSS framework
• React - UI library
• TypeScript - Type safety

Special thanks to the daisyUI team for creating an amazing component library that powers the styling of amvasdev-ui.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Amaury Vasquez

Made with ❤️ by Amaury Vasquez