Installation

Aeonkit is a UI kit library built with a variety of technologies such Tailwind CSS, React and Astro. All modules are written in Typescript to ensure type safety. It is designed to be used across any Tailwind/React project to speed up development time. It is built with a focus on accessibility, performance and developer experience.

Requirements

Packages

Aeonkit is composed of multiple packages that can be installed individually. The main package is @aeonkit/react which contains all the core components.

Package	Description	NPM
`@aeonkit/react`	Baseline components built with React, Tailwind and Typescript
`@aeonkit/core`	A set of resuable components written in React
`@aeonkit/astro`	A set of resuable components written in Astro
`@aeonkit/helpers`	Helper functions used in Aeonkit

Installation

Aeonkit and all its packages can be installed using the following command:

npm install @aeonkit/react

TailwindCSS

Assuming you have installed Tailwind CSS and setup the configuration file, you can import the Tailwind config from Aeonkit by add the following the preset property in your tailwind.config.js file:

Aeonkit Preset

  module.exports = {
     presets: [require("@aeonkit/react/dist/theme")],
     // ...rest of your config
  }

Content Paths

You will also need to tell Tailwind to use the Aeonkit styles by adding the following to the content property in your tailwind.config.js file:

  module.exports = {
     content: [
        "./node_modules/@aeonkit/react/**/*.{ts,tsx}",
        "./node_modules/@aeonkit/core/**/*.{ts,tsx}",
        "./node_modules/@aeonkit/astro/**/*.{astro,tsx,ts}",
  ],
     // ...rest of your config
  }

Brand Colors

Aeonkit accepts a primary and secondary color to the tailwind theme for certain components. You will need to add these colors to the tailwind config file if you wish to use your own brand colors, otherwise the default colors will be used.

    module.exports = {
      extend: {
        colors: {
          primary: {
            50: "#fcf7f0",
            100: "#f9ecdb",
            200: "#f2d6b6",
            300: "#eabb87",
            400: "#e09657",
            500: "#d97a36",
            600: "#cb632b",
            700: "#a94d25",
            800: "#8b4026",
            900: "#6d3521",
            950: "#3b190f",
          },
        },
    },
     // ...rest of your config
  }

CSS Overides

Aeonkit uses Tailwind CSS for styling. You can use the utility classes provided by Tailwind to style your components. If you need to add custom styles, you can use the className prop to add your own classes. Most of the components accept a className prop to add custom styles.

Override the component styles as such:

<Badge className="bg-teal-500">NEW</Badge>

That’s it 🥳🎉! You’re now ready to use Aeonkit in your project. Enjoy!