All Projects β†’ treebohotels β†’ Leaf Ui

treebohotels / Leaf Ui

Licence: mit
πŸƒ Leaf-UI: A react component library built using styled-components

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
Lab
React UI component design tool
Stars: ✭ 349 (+256.12%)
Mutual labels:  design-system, 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].