Kudu UI Design System is a CSS library used across all products developed by Kudu.
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
- Import and include the preset configuration from
kudu-ui-system
in yourtailwind.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 yourpostcss.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>
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.
If you want to know the different changes between versions of this package, look at the changelog here.
Please file the issue here.
By contributing to kudu-ui-system, you agree that your contributions will be licensed under the LICENSE of the project.