Skip to main content

Getting Started with UIC

Install UIC​

Install the package with npm or your favorite package manager:

npm i --save @okcontract/uic

Tailwind + DaisyUI​

OKcontract UI Components use Tailwind CSS, an open-source, utility-first CSS framework. Tailwind CSS enables easy and flexible customization of the components' appearance.

All UIC components use daisyUI - a popular component library on top of Tailwind CSS. UIC uses daisyUI class names like btn, card, tooltip, checkbox etc.

daisyUI comes with dozens of pre-built themes light, dark, cupcake etc, and allows to easily create a custom theme. Also, it allows to use multiple themes in your app.

Learn more about daisyUI classes here.

Use UIC with your own daisyUI theme​

To apply your own theme to UIC components, you need to use a daisyUI theme. If your app uses daisyUI, it will apply to all components.

In your tailwind.config.js you need to include a path to the files @okcontract/uic/dist. Here's an example:

// tailwind.config.js
import daisy from "daisyui";

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/@okcontract/uic/dist/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [daisy],
};

Use together with another CSS library​

If you use another CSS library in your app, you have to generate a custom theme from your colors and apply it around a UIC component using a data-theme tag. In that case, install tailwindcss, autoprefixer and daisyui plugin for Tailwind CSS.

Once setup, simply add data-theme='THEME_NAME' to any element and the theme will apply on the content inside it.

<html data-theme="light">
  <div data-theme="dark">
    The component inside this div will have daisyUI dark theme.
  </div>
</html>

Use OKcontract pre-built stylesheet​

OKcontract UIC comes with pre-built daisyUI theme stylesheet. If you prefer to use OKcontract pre-built theme (which is used in our Storybook), you can include style.min.css in your main.js|ts or its equivalent.

// main.js
import "[PATH]/node_modules/@okcontract/uic/dist/style.min.css";