Usage

Learn how to use Podo UI

Using CSS Classes

Podo UI uses a CSS-first approach. Most styles are applied through HTML classes.

Button Example

<button class="primary">Primary Button</button>
<button class="info">Info Button</button>
<button class="danger">Danger Button</button>

Button Variants

<button class="primary-fill">Primary Fill</button>
<button class="primary-border">Primary Border</button>
<button class="primary-text">Primary Text</button>

Input Example

<input type="text" placeholder="Default Input" />
<input type="text" class="success" placeholder="Success Input" />
<input type="text" class="danger" placeholder="Danger Input" />

SCSS Functions and Mixins

You can write custom styles using Podo UI's design tokens in SCSS modules.

Color Function

@use 'podo-ui/mixin' as *;

.myComponent {
  background: color(primary-base);      // Primary color
  color: color(primary-reverse);        // Primary reverse color
  border: 1px solid color(primary-outline);

  &:hover {
    background: color(primary-hover);   // Primary hover color
  }
}

Spacing Function

@use 'podo-ui/mixin' as *;

.myComponent {
  margin: s(4);          // 12px
  padding: s(6);         // 20px
  gap: s(3);            // 8px

  // Available from 0-13
  margin-top: s(8);     // 28px
}

Border Radius Function

@use 'podo-ui/mixin' as *;

.myComponent {
  border-radius: r(2);   // 4px
  border-radius: r(3);   // 8px
  border-radius: r(4);   // 12px
}

Typography Mixins

@use 'podo-ui/mixin' as *;

.title {
  @include display1;     // Largest heading
}

.heading {
  @include display4;     // Medium heading
}

.body {
  @include p2;          // Body text
}

.caption {
  @include p5;          // Small text
}

React Components

Some complex components are provided as React components.

General React

import { Input, Textarea, Editor, Field } from 'podo-ui';

function MyForm() {
  return (
    <Field label="Name" required>
      <Input placeholder="Enter your name" />
    </Field>
  );
}

Theme (Light/Dark Mode)

Podo UI automatically supports light mode and dark mode.

Theme Setup

// Set to light mode
document.documentElement.setAttribute('data-color-mode', 'light');

// Set to dark mode
document.documentElement.setAttribute('data-color-mode', 'dark');

// Follow system settings
document.documentElement.setAttribute('data-color-mode', '');

Note: All colors automatically adapt to the theme when using the color() function.

Next Steps

Refer to the documentation in each section for more details:

Color System

8 semantic colors and variants

Typography

Font styles and mixins

Icons

119 icon fonts

Components

Explore UI components