amvasdevUI
A React component library with DaisyUI styling and custom JavaScript implementations
Introduction
amvasdev-ui is a comprehensive React component library that combines the beautiful styling of DaisyUI with custom JavaScript implementations. Built from the ground up to provide developers with fully customizable, production-ready components that maintain the aesthetic appeal of DaisyUI while offering complete control over component behavior and logic.
Why amvasdev-ui?
DaisyUI-Inspired Design
Leverages the proven design system of DaisyUI, providing beautiful and consistent styling across all components with support for multiple themes and color variants.
Custom React Implementation
Built specifically for React with custom JavaScript logic, hooks, and state management. No dependency on DaisyUI's JavaScript - complete control over component behavior.
Fully Customizable
Every component accepts custom props, supports className overrides, and provides extensive configuration options to match your specific requirements.
TypeScript Support
Written in TypeScript with full type definitions, providing excellent IDE support, autocompletion, and type safety throughout your application.
Key Features
🎨 Comprehensive Component Library
Over 20 production-ready components including forms, modals, dropdowns, tooltips, and more. All components follow consistent design patterns and APIs.
🎯 Variant System
Consistent color variants across all components: base, neutral, primary, secondary, accent, info, success, warning, error, ghost, and link.
📏 Flexible Sizing
Multiple size options (xs, sm, md, lg, xl) available for most components, ensuring perfect fit for any layout.
🔌 Utility Hooks
Built-in React hooks for common patterns like notifications, form handling, local storage, and toggle states.
🌙 Theme Support
Full support for DaisyUI themes with automatic dark mode handling via prefers-color-scheme.
♿ Accessibility First
Components built with accessibility in mind, following WAI-ARIA guidelines and supporting keyboard navigation.
Getting Started
Installation
npm install amvasdev-uiImport Styles
Import the CSS file in your root layout or main entry file:
import "amvasdev-ui/dist/index.css";Use Components
Import and use components in your React application:
import { Button, Modal, Input } from "amvasdev-ui";
function App() {
return (
<div>
<Button variant="primary">Click me</Button>
<Input label="Username" />
</div>
);
}