Installation
Install Podo UI in your project
NPM Installation
You can install Podo UI using npm, yarn, or pnpm:
npm install podo-uiyarn add podo-uipnpm add podo-uiBasic Setup
1. Apply Global SCSS
Import global styles at your application's entry point:
main.tsx or App.tsx
import 'podo-ui/global.scss';Note: global.scss includes all basic styles including reset, colors, layout, typography, icons, buttons, forms, etc.
2. Additional Setup for Vite Projects
Important: Font path override is required when using Vite!
Vite may not correctly handle relative paths inside node_modules. Additionally import vite-fonts.scss:
main.tsx (Vite)
import 'podo-ui/global.scss';
import 'podo-ui/vite-fonts.scss'; // Override font paths for ViteNote: Other bundlers like Next.js or Create React App can be used without vite-fonts.scss.
3. Using Variables/Functions/Mixins in SCSS Modules
To use Podo UI's functions and mixins in your component's SCSS modules, import them as follows:
component.module.scss
@use 'podo-ui/mixin' as *;
.myComponent {
color: color(primary); // Color function
margin: s(4); // Spacing function (12px)
border-radius: r(2); // Radius function
@include p2; // Typography mixin
}Using React Components
Podo UI provides some React components. You can import and use them as follows:
General React Projects
import { Input, Textarea, Editor, Field, Toast, Chip } from 'podo-ui';Next Steps
Installation complete! Now refer to the following documentation to use Podo UI: