Punch-UI Introduction
Punch-UI is a modern UI component library built on ofa.js, providing a rich set of components and comprehensive theme customization capabilities.
Features
- 🎨 Material Design 3 - Adopts the latest Material Design 3 specification, providing a modern visual experience
- 🌗 Theme Switching - Built-in dark/light theme support, can automatically follow the system or be manually toggled
- 📦 On-Demand Loading - Based on the modular design of ofa.js, only loads the required components
- 🔧 Highly Customizable - Supports custom themes, colors and styles
- 📱 Responsive Design - All components support responsive layout, adaptable to both mobile and desktop
Component List
Punch-UI provides a rich component library, covering the following categories：
Basic Components
- Button - Button, supports multiple styles, sizes and colors
- Input - Input box, supports multiple styles and sizes
- Textarea - Multi-line text input box
Form Components
- Checkbox - Checkbox, supports single and combined use
- Radio - Radio button, supports single and combined use
- Select - Dropdown selector
- Switch - Toggle switch
Data Display
- List - List item component, supporting prefix and suffix
- Tabs - Tab component
Feedback Component
- Dialog - modal dialog
- Snackbar - snackbar
Navigation Component
- Navigation - Navigation bar and navigation layout
Utility Functions
- Toast - Lightweight notification
- Alert - Alert box
- Confirm - Confirm box
- Prompt - Prompt box
Why Choose Punch-UI?
1. No Build Tools Needed
Punch-UI is based on ofa.js and can be used directly in the browser without build tools like Webpack or Vite. This makes development simpler and faster.
2. Modular Design
Each component is an independent module that can be loaded on demand, without introducing unnecessary code.
3. Comprehensive Theme System
Based on the Material Design 3 color system, it provides semantic color variables and automatically adapts to dark/light themes.
4. Easy to Customize
Support customizing themes via CSS variables, and also customizing component styles via CSS Part selectors.
Browser Support
Punch-UI supports all modern browsers:
- Chrome (latest version)
- Firefox (latest version)
- Safari (latest version)
- Edge (latest version)
Next Step
- Installation - Learn how to install and configure Punch-UI
- First Example - Create your first Punch-UI application