@equal-experts/kuat-vue-library NPM

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.