Kuat Vue Library

Overview

Kuat is the Equal Experts Vue based Component library for building web frontends. It is in it's early alpha stage of development and should be used with care at this point.

Our goal is to provide a modern, accessible, and customizable Vue 3 component library that enables teams to build high-quality, consistent user interfaces quickly and efficiently across the Equal Experts eco-system.

Features

• Modern Vue 3 Components
• Tailwind CSS Integration
• Responsive Design
• Accessibility Focused
• Fully Typed with TypeScript

Installation

Install Kuat using npm:

npm install @equal-experts/kuat-vue-library

Run installation script:

node node_modules/@equal-experts/kuat-vue-library/scripts/install.js

Add Kuat's core CSS to your CSS file. Ensure it is imported before any other styles:

@import '@equal-experts/kuat-vue-library/styles/core.css';

Manual Installation

If the installation script fails, you can manually install the library by following these steps:

Install Kuat using npm:

npm install @equal-experts/kuat-vue-library

Add Tailwind config to the root of your project:

// tailwind.config.js
const { plugin } = require('@equal-experts/kuat-vue-library/tailwind.config');

    module.exports = plugin({
        content: [
            './src/**/*.{vue,js,ts}', 
            './node_modules/@equal-experts/kuat-vue-library/src/**/*.{vue,js,ts,css}', 
          ],
      });

Add PostCSS config to the root of your project:

// postcss.config.js
export default {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};
  

Usage

Importing Components

Import component in your Vue file

import { Button, ButtonGroup } from '@equal-experts/kuat-vue-library'

Import components styles to after the core import in your CSS file

@import '@equal-experts/kuat-vue-library/styles/Button/Button.css';
@import '@equal-experts/kuat-vue-library/styles/button-group/button-group.css';

Styling

Kuat uses Tailwind v3 CSS for styling. Make sure to include Tailwind in your project as described in the installation steps.

All Tailwind v3 styles are available. See Tailwind documentation for more information.

Important Customisation notes

Kuat has some custom style properties to meet our brand foundations. For example, typography and colors. The design foundations are being documented at this time. Please refer to the design tokens in /src/design-tokens/global-tokens.json for more information.

Available Components

Accordion

A flexible, accessible accordion component:

<template>
  <Accordion :items="accordionItems" />
</template>

<script setup>
const accordionItems = [
  { 
    title: 'Section 1', 
    content: 'Content for section 1',
    expanded: false 
  },
  { 
    title: 'Section 2', 
    content: 'Content for section 2' 
  }
]
</script>

Button Group

Create responsive button groups:

<template>
  <ButtonGroup :buttons="buttonList" />
</template>

<script setup>
const buttonList = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' }
]
</script>

Extending Kuat configuration in your project

When Kuat is installed in your project, it will automatically add the following to your Tailwind configuration file:

// tailwind.config.js
const { plugin } = require('@equal-experts/kuat-vue-library/tailwind.config');

module.exports = plugin({
    content: [
        './src/**/*.{vue,js,ts}', 
        './node_modules/@equal-experts/kuat-vue-library/src/**/*.{vue,js,ts,css}', 
      ],
  });

Additional configuration options can be passed to through the plugin function to customise the Tailwind configuration.

Kuat development

Setup

1. Clone the repository
2. Install dependencies: npm install
3. Run development server: npm run dev
4. Run tests: npm test

Kuat has Storybook for development and testing. Run Storybook: npm run storybook

Contributing

Contributions are welcome! Please check our Contributing Guidelines.

License

This project is licensed under the MIT License.

Contact

Maintained by Equal Experts

• Website: equalexperts.com
• GitHub: @equal-experts