Kudu-ui-system NPM

Kudu UI System

Kudu UI Design System is a CSS library used across all products developed by Kudu.

Install package

Note:
In order to the kudu-ui-system package to work correctly, you need to have Tailwind and PostCSS configured in your project beforehand. You can learn how to configure Tailwind and PostCSS in your project by following this link.

After installing ppnpm, Tailwind and PostCSS, you can install kudu-ui-system with this command:

pnpm i kudu-ui-system

Usage

Import and include the preset configuration from kudu-ui-system in your tailwind.config.js.

const { tailwindPreset } = require("kudu-ui-system/tailwindcss");

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  presets: [tailwindPreset],
};

Import and include the postcss configuration from kudu-ui-system in your postcss.config.js.

const { kuduuisystem } = require("kudu-ui-system/postcss");

export default {
  plugins: {
    ...kuduuisystem,
    ...
  }
};

In your main CSS file, import kudu-ui-system at the beginning of the file

@import "kudu-ui-system/styles";

Set the custom atrribute data-theme="kududesign" in your HTML file:

<!DOCTYPE html>
<html lang="en" dir="ltr" data-theme="kududesign">
  ...
</html>

Development

All this package is generated with Tailwind CSS and DaisyUI.

Tailwind CSS allows for more efficient CSS writing and maintains a structured approach. Daisy UI is a class library that provides styles for commonly used components.

For more details, you can refer to the documentation of Tailwind CSS and Daisy UI.