treebohotels / Leaf Ui
Licence: mit
π Leaf-UI: A react component library built using styled-components
Stars: β 98
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Leaf Ui
sugui
UI Components library based on React, Styled Components and React Testing Library
Stars: β 17 (-82.65%)
Mutual labels: styled-components, design-system, ui-library
React95
ππΉ Refreshed Windows 95 style UI components for your React app
Stars: β 4,877 (+4876.53%)
Mutual labels: design-system, components, styled-components
lab-cli
Command line utilities and exporting module for Compositor Lab
Stars: β 52 (-46.94%)
Mutual labels: components, styled-components, design-system
Design System
Priceline.com Design System
Stars: β 604 (+516.33%)
Mutual labels: design-system, components, styled-components
Vitamin Web
Decathlon Design System libraries for web applications
Stars: β 70 (-28.57%)
Mutual labels: design-system, components, ui-library
Calcite Components
Web Components for the Calcite Design System. Built with Stencil JS. Currently in Beta!
Stars: β 96 (-2.04%)
Mutual labels: design-system, components
Handycontrols
Contains some simple and commonly used WPF controls based on HandyControl
Stars: β 347 (+254.08%)
Mutual labels: components, styled-components
Macro Components
Create flexible layout and composite UI components without the need to define arbitrary custom props
Stars: β 485 (+394.9%)
Mutual labels: components, styled-components
Clarity
Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
Stars: β 6,398 (+6428.57%)
Mutual labels: design-system, components
Uiengine
Workbench for UI-driven development
Stars: β 349 (+256.12%)
Mutual labels: design-system, components
Shards React
βοΈA beautiful and modern React design system.
Stars: β 639 (+552.04%)
Mutual labels: design-system, components
Orbit
React components of open-source Orbit design system by Kiwi.com
Stars: β 774 (+689.8%)
Mutual labels: design-system, styled-components
Daisyui
βοΈ βοΈ βοΈ βοΈ βοΈ βTailwind Components
Stars: β 382 (+289.8%)
Mutual labels: design-system, ui-library
Alva
Create living prototypes with code components.
Stars: β 3,734 (+3710.2%)
Mutual labels: design-system, components
Stylable
Stylable - CSS for components
Stars: β 1,109 (+1031.63%)
Mutual labels: design-system, components
Carbon Components Svelte
Svelte implementation of the Carbon Design System
Stars: β 685 (+598.98%)
Mutual labels: design-system, ui-library
Vuedarkmode
π©βπ¨π¨βπ¨ A minimalist dark design system for Vue.js. Based components designed for the insomniacs who enjoy dark interfaces as much as we do.
Stars: β 1,034 (+955.1%)
Mutual labels: design-system, components
Ivory
A modern CSS framework for developing powerful web interfaces faster and easier.
Stars: β 61 (-37.76%)
Mutual labels: design-system, components
Community Platform
A series of tools for the Precious Plastic community to collaborate around the world and tackle plastic waste.
Stars: β 343 (+250%)
Mutual labels: design-system, styled-components
π Leaf-UI
A react component library for web, native and amp built using styled-components
[WARNING: This is a work in progress, API is subject to change]
Installation
npm install -S leaf-ui
Usage
Wrap your App component with ThemeProvider and pass it the leaf-ui theme (or override it with custom a theme)
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'styled-components';
import leafUiTheme, { BaseStyles } from 'leaf-ui/theme';
import App from './App';
ReactDOM.render(
<ThemeProvider theme={leafUiTheme}>
<BaseStyles/>
<App />
</ThemeProvider>,
document.getElementById('root'),
);
Import and use the components in your App.js
// App.js
import React from 'react';
import Button from 'leaf-ui/Button';
// for commonjs use,
// import Button from 'leaf-ui/cjs/Button';
const App = () => (
<Button>
Leaf-UI
</Button>
);
export default App;
Supported Platforms
- web
- native
- amp
Contribute
Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to leaf-ui.
Setup
Follow this quick setup guide to get leaf-ui working on your local machine.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].