Podo UI

HELLO Welcome
Podo UI

A lightweight and flexible SCSS Module-based design system. Build beautiful websites quickly with systematic design tokens and various components.

SCSS Module-based Design System

A design system that allows you to implement beautiful UI with just HTML and SCSS. It provides systematic design tokens such as colors, spacing, and typography, with a flexible structure that can be used with various frameworks.

Docs
Text
Icon
Input
Select
Header

Lightweight & Fast

Built with pure SCSS for a small bundle size and fast performance without runtime overhead.

Systematic Design Tokens

Build consistent UI with design system functions for colors, spacing, typography, radius, and more.

Dark Mode Support

Built-in support for light/dark modes with warm tone settings for an optimized user experience.

Responsive Grid System

Flexible layout system that automatically adapts to PC(12), Tablet(6), and Mobile(4) grids for all devices.

Powerful SCSS Function System

Use design tokens with intuitive functions like color(), s(), r(). Build a consistent design system within your team and customize easily.

w-1_12
w-2_3
w-2
w-5
w-4
w-3
w-2
w-1

Rich UI Component Library

Essential components for web development including buttons, form elements, tables, tabs, and more. CSS class-based architecture allows free customization and extension.

Components Preview
Avatar
Avatar
AB
Avatar
Button
Input
Select
Checkbox & Radio
Toggle
Podo UI

Support Podo UI

Support the open-source Podo UI project with a Star on GitHub. Let's build it together so more people can use it conveniently!

Star on GitHub