Hexa UI

Hexa UI is a modern, flexible, and lightweight React component library built with Vite and styled with Tailwind CSS. It offers a wide range of customizable and reusable components that simplify UI development for your React applications.

Features

• 🚀 Fast and Lightweight: Developed with Vite, ensuring high performance and fast builds.
• 🎨 Tailwind CSS Integration: Styled with Tailwind CSS for utility-first, responsive design out of the box.
• ⚙️ Highly Customizable: Modify styles easily with Tailwind classes, extend themes, or use component-specific variants and themes.
• 📚 Developer Friendly: Intuitive API, comprehensive documentation, and live examples.
• 🛠️ Built for Scalability: Suited for projects of any size—from small apps to large-scale applications.

Installation

step 1: install Hexa Ui via NPM:

To get started with Hexa UI, install the library via npm:

npm install react-hexa

step 2: Install Tailwind CSS (Required)

Hexa UI is built with Tailwind CSS, you need to set up Tailwind in your project. Here's how to install Tailwind CSS with Vite and React:

1. Install Tailwind CSS and its peer dependencies:

npm install -D tailwindcss postcss autoprefixer

2. Initialize Tailwind by creating the default configuration files:

npx tailwindcss init -p

3. Configure tailwind.config.js to include all of your React files and components by adding this content:

module.exports = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

4. Add the Tailwind directives to your CSS file (e.g., src/index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

step 3: Import Hexa UI's CSS

After setting up Tailwind, ensure that you import Hexa UI’s CSS into your project. This CSS is necessary to apply the library's default styles.

In your main application file (e.g., src/main.jsx or src/index.js), add the following import:

import "react-hexa/dist/main.css";

Usage

Once installed, you can start using the components by importing them into your project. Here's a quick example of how to use the Button component:

import React from 'react';
import { Button } from 'react-hexa/src';

function App() {
  return (
     <Button variant={Warning} size={Sizes.Lg}>
        {Warning}
      </Button>
  );
}

export default App;

Customization

Hexa UI components are built with Tailwind CSS at their core, offering extensive customization options to match your project’s needs:

• Utility Classes: Override component styles on the fly by passing in your own Tailwind utility classes.

• Theme Extension: Customize your entire application by extending Tailwind's configuration to introduce your own design tokens.

• Variants: Use built-in component variants to apply predefined styles consistently across your app.

• Component Themes: For more advanced styling, override the default component themes to enforce a cohesive design language throughout your project.

<List
  items={["item 1", "item 2", "item 3"]}
  fontSize={Sizes.Xl}
  gap={Sizes.Xs}
  variant={"random"}
  icons={[
    <GiBulletBill size={12} />,
    <GiAbbotMeeple size={12} />,
    <GiAbstract004 size={12} />,
  ]}
  byOrder
  listTitle={{
    text: "vertical list witha random variant and ordered icons",
    color: mode === "light" ? "text-zinc-800" : "text-zinc-200",
  }}
  />

Documentation

For detailed documentation, usage examples, and a complete list of components, please visit the Hexa-UI Documentation.

License

Hexa UI is licensed under the MIT License. See the LICENSE file for more information.