Components

uico includes CSS classes for a few common components that can be created without JavaScript. Here’s a post explaining why you might want to use CSS for simple components instead of a JavaScript UI framework.

Config

uico({
    components: true, // defaults to `true`
}),

Custom Properties

uico components expect certain colors and a border radius size to be set as CSS custom properties. You control these properties and can create your own theme. Check out the oklch colors page to copy the values of uico’s or Tailwind’s color palettes.

If you are using a function like hsl or oklch for your theme, you can set colorFunction to a string. This allows Tailwind to inject alpha values for opacity for classes like bg-primary/50.

For example, this site uses oklch:

uico({
    colorFunction: "oklch",
}),

/* style.postcss */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --background: 99% 0.005 257; /* slate-50 */
        --foreground: 37% 0.05 257; /* 700 */
        --muted: 93% 0.015 257; /* 200 */
        --muted-foreground: 44% 0.05 257; /* 600 */
        --primary: 28% 0.05 257; /* 800 */
        --primary-foreground: 97% 0.01 257; /* 100 */
        --secondary: 87% 0.022 257; /* 300 */
        --secondary-foreground: 22% 0.05 257; /* 900 */
        --destructive: 56% 0.19 17; /* rose-700 */
        --destructive-foreground: 100% 0 0; /* white */
        --accent: 28% 0.05 257; /* 800 */
        --accent-foreground: 93% 0.015 257; /* 200 */
        --card: 100% 0 0; /* white */
        --card-foreground: 37% 0.05 257; /* 700 */
        --border: 93% 0.015 257; /* 200 */

        --radius: 0.3rem;
    }

    /* You can also create different themes, for example: */
    .dark {
        --background: 0% 0 0 /* black */;
        /* ... */
    }
}

After configuring your theme, these colors can be utilized throughout the project with the added benefit of auto-complete if you have the TailwindCSS extension installed in your IDE.

TailwindCSS Reference

Customize

These components are designed to be minimal, you can customize and add more styles via CSS.

@layer components {
    .card {
        border: 1px solid theme(borderColor.DEFAULT);
    }
}

Preview

Button

<button class="button button-primary">Primary</button>

Badge

<span class="badge badge-primary">Primary</span>

Card

<div class="card">Card</div>

Input/Label

<label for="textInput" class="label">Text</label>
<input type="text" id="textInput" class="input" placeholder="Placeholder" />

Link

<a href="https://github.com/rossrobino/uico" class="link">link</a>