A modern, lightweight native Web Components UI library built with Stencil.js. Framework-agnostic, works in JS/Vue/React/Angular projects, and provides complete TypeScript type support.
- Built with Stencil.js: Uses standard Web Components standards, compatible with any frontend framework
- Framework-agnostic: Native Web Components, usable in any framework
- Lightweight: Load on demand, minimized bundle size
- Modern Design: Clean and beautiful interface design
- TypeScript Support: Complete type definitions and intelligent code completion
- Internationalization: Supports both Chinese and English
- Responsive Design: Adapts to various screen sizes
- Customizable Theme: Supports theme customization and configuration
npm install @zanejs/uipnpm add @zanejs/uiyarn add @zanejs/uiDirectly include in HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@zanejs/ui@1.0.1/dist/zane-ui/zane-ui.esm.js"></script>
</head>
<body>
<zane-button type="primary">Hello Zane UI</zane-button>
</body>
</html>import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
+ import { defineCustomElements } from '@zanejs/ui/loader';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
+ defineCustomElements();
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue';
+ import { defineCustomElements } from '@zanejs/ui/loader';
+ defineCustomElements();
createApp(App).mount('#app')Modify vite.config.js for Vue compilation compatibility with custom elements:
import { defineConfig } from 'vite';
export default defineConfig({
vue: {
template: {
compilerOptions: {
+ isCustomElement: tag => tag.startsWith('zane-')
},
},
},
});- Button - Button component with various styles and states
- Input - Input component supporting multiple types
- Tag - Tag component for labeling and selection
- Avatar - Avatar component
- Icon - Icon component
- Link - Link component
- Text - Text component
- Form - Form component with validation support
- Autocomplete - Autocomplete component
- Cascader - Cascader selector
- Container - Container component
- Header - Header layout
- Footer - Footer layout
- Main - Main content area
- Aside - Sidebar
- Row - Grid row
- Col - Grid column
- Divider - Divider
- Node.js >= 18.x
- pnpm >= 8.x
pnpm install# Start development server (with hot reload)
pnpm run dev# Build production version
pnpm run build
# Generate documentation only
pnpm run build:docs-only
# Generate components
pnpm run generate# Run all tests
pnpm run test
# Run tests in watch mode
pnpm run test.watchzane-ui/
├── src/
│ ├── components/ # Component source code
│ │ ├── button/ # Button component
│ │ ├── input/ # Input component
│ │ ├── form/ # Form component
│ │ ├── ... # Other components
│ ├── global/ # Global configuration
│ │ ├── theme/ # Theme styles
│ │ └── store.ts # Global state
│ ├── utils/ # Utility functions
│ ├── hooks/ # Custom Hooks
│ ├── types/ # TypeScript type definitions
│ ├── locale/ # Internationalization language packs
│ └── index.ts # Entry file
├── dist/ # Build output directory
├── loader/ # Dynamic loader
├── www/ # Example pages
└── stencil.config.ts # Stencil configuration file
The project supports theme customization. You can customize themes by modifying SCSS files in the src/global/theme/ directory:
// Custom theme variables
:root {
--zane-primary-color: #1890ff;
--zane-success-color: #52c41a;
--zane-warning-color: #faad14;
--zane-danger-color: #f5222d;
}The project has built-in Chinese and English support. You can configure globally using the zane-config-provider component:
<zane-config-provider locale="zh-cn">
<App />
</zane-config-provider>
<zane-config-provider locale="en">
<App />
</zane-config-provider>We welcome all forms of contributions! Whether it's reporting bugs, suggesting features, or contributing code.
- Fork this project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open-sourced under the MIT license.
Thanks to the following open-source projects:
- Stencil.js - Compiler
- @ctrl/tinycolor - Color handling
- @floating-ui/dom - Floating element positioning
- @popperjs/core - Tooltip positioning
- Submit Issues: GitHub Issues
- Join Discussions: GitHub Discussions
If this project helps you, please give us a ⭐️!