Awesome
<div align="center"> <a href="https://concis.org.cn" target="_blank"> <img alt="Concis Logo" width="200" src="https://concis.org.cn/images/concis-logo.png"/> </a> </div> <div align="center"> <h1>Concis</h1> </div> <div align="center">High-performance, lightweight UI library for rapidly building React applications.
<img src="https://img.shields.io/github/stars/fengxinhhh/concis" alt="stars"> <img src="https://img.shields.io/badge/react-v18.2.0%2B-%23407fbc" alt="react"> <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="licence"> <img src="https://github.com/fengxinhhh/concis/workflows/CI/badge.svg" alt="ci"> </div> <div align="center">English | 简体中文
</div> <div align="center"> <img src="https://concis.org.cn/images/index-bg.jpg" width="1200" /> </div>Features
Comprehensive
With more than 50 crafted components that you can use out of the box.
Customizable theme
Extensive design tokens can be customized to build your own theme. the way of customization are supported:
TypeScript friendly
All components are written in TypeScript so it's type friendly.
Installation
Available as an npm package
// with npm
npm install concis@latest
// with yarn
yarn add concis@latest
Examples
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'concis';
import 'concis/web-react/style/index.css';
function App() {
return <Button type="primary">Hello Concis!</Button>;
}
ReactDOM.render(<App />, document.getElementById('app'));
Local experience
In the examples folder, there is a vite
+ react
project runtime environment, in which you can experience the concis
component, run the command in the project root directory:
pnpm examples:dev
Visit http://localhost:5173
.
Useful Links
Browser Support
Contributing
Developers interested in contributing should read the Contributing Guide.
Thank you to all the people who already contributed to Concis!
<a href="https://github.com/fengxinhhh/concis/graphs/contributors"> <img src="https://contrib.rocks/image?repo=fengxinhhh/concis" /> </a>