Installation

Get started with amvasdev-ui in your React project. Follow these steps to install and configure the library.

Prerequisites

Before installing amvasdev-ui, ensure you have the following:

  • Node.js 16.x or higher
  • React 18.x or higher
  • A React project (Next.js, Vite, Create React App, etc.)

Install the Package

Install amvasdev-ui using your preferred package manager:

npm

npm install amvasdev-ui

yarn

yarn add amvasdev-ui

pnpm

pnpm add amvasdev-ui

Import Styles

Import the CSS file in your application's entry point or root layout:

Next.js App Router

Add the import to your root layout file (app/layout.tsx):

import "amvasdev-ui/dist/index.css";

  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
      <html lang="en">
        <body>{children}</body>
      </html>
    );
  }

Next.js Pages Router

Add the import to pages/_app.tsx:

import "amvasdev-ui/dist/index.css";
  import type { AppProps } from "next/app";

  export default function App({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
  }

Vite

Add the import to your main entry file (src/main.tsx):

import React from "react";
  import ReactDOM from "react-dom/client";
  import "amvasdev-ui/dist/index.css";
  import App from "./App";

  ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

Create React App

Add the import to src/index.tsx:

import React from "react";
  import ReactDOM from "react-dom/client";
  import "amvasdev-ui/dist/index.css";
  import App from "./App";

  const root = ReactDOM.createRoot(
    document.getElementById("root") as HTMLElement
  );
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

Tailwind CSS Configuration

amvasdev-ui uses Tailwind CSS and DaisyUI for styling. If you don't already have Tailwind CSS installed, follow these steps:

1. Install Tailwind CSS and DaisyUI

npm install -D tailwindcss daisyui

2. Initialize Tailwind CSS

npx tailwindcss init

3. Configure tailwind.config.js

Add DaisyUI to your Tailwind configuration:

/** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./app/**/*.{js,ts,jsx,tsx,mdx}",
      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
      "./components/**/*.{js,ts,jsx,tsx,mdx}",
      "./src/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    plugins: [require("daisyui")],
    daisyui: {
      themes: ["light", "dark", "cupcake", "emerald", "dracula"],
    },
  };

4. Add Tailwind Directives to CSS

Add these directives to your global CSS file (globals.css):

@tailwind base;
  @tailwind components;
  @tailwind utilities;
If you already have Tailwind CSS and DaisyUI configured in your project, you can skip this section.

Verify Installation

Test that everything is working correctly by using a component:

import { Button } from "amvasdev-ui";

  function App() {
    return (
      <div className="p-8">
        <Button variant="primary">Hello amvasdev-ui!</Button>
      </div>
    );
  }

If you see a styled button when you run your application, the installation was successful!

TypeScript Support

amvasdev-ui is written in TypeScript and includes full type definitions. No additional setup is required for TypeScript projects. You'll get automatic type checking and autocomplete in your IDE.

import { Button } from "amvasdev-ui";
  import type { ButtonProps } from "amvasdev-ui";

  const MyButton: React.FC<ButtonProps> = (props) => {
    return <Button {...props} />;
  };

Next Steps

Now that you've installed amvasdev-ui, here's what to do next:

📚 Browse Components

Explore all available components with live examples and code snippets.

🔌 Utility Hooks

Learn about built-in hooks for common React patterns and state management.

🎨 Theming Guide

Customize themes and learn how to style components to match your brand.

Troubleshooting

Components are not styled

Make sure you've imported the CSS file and configured Tailwind CSS with DaisyUI. Check that the import statement is in your root layout or entry file.

TypeScript errors with components

Ensure you're using compatible versions of React and TypeScript. The library requires React 18+ and TypeScript 4.5+.

Styles conflict with existing CSS

If you're experiencing style conflicts, make sure the amvasdev-ui CSS is imported after your global styles. You can also use CSS modules or CSS-in-JS solutions to scope your styles.

Get Help

If you encounter any issues during installation, here are some resources:

Report an IssueJoin Discussions