Awesome
<p align="center"> <img src="https://drive.google.com/uc?id=1xx7bDwhe9NNl93jJvyERbt3Uky3XbfcV"/> </p> <h1 align="center">Sha-el-design</h1> <div align="center">React components for easier customization and smooth development flow.
</div>🔥 Features
- 🌹 Material inspired design.
- 📦 A complete package of ui resource for any React project.
- 🛡 Made with ❤ using Typescript.
- 🎨 Easy theme customization using
ThemeContext
. - 🤏 Smaller Footprint @ 102kb GZIPED.
🎛 Environment Support
- Server-side Rendering
- Electron
🔧 Installation
Sha-el-design is available as an npm package.
// with npm
npm install react-icons sha-el-design
// with yarn
yarn add react-icons sha-el-design
🃏 Usage
Simple example for you to get started.
import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'sha-el-design';
function App() {
return (
<Button primary>Hello World</Button>
);
}
ReactDOM.render(<App />, document.querySelector('#app'));
💫 Examples
Check example folder.
✍ Documentation
Check out our Storybook.
🎨 Theming
Sha-el-design supports Theming(DARK 👻, LIGHT and more) out of box using ThemeContext
.
import * as React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { ThemeProvider } from 'sha-el-design/lib/components/Theme/Theme';
export class App extends React.Component {
public render() {
return (
<ThemeProvider theme="DARK">
<BrowserRouter>
<Switch>
<Route path="/login">
...
</Route>
<Route path="/home">
...
</Route>
</Switch>
</BrowserRouter>
</ThemeProvider>
);
}
}
🤝 Contributing
Make sure coding quality is best you can come up with also please be polite to everyone.
We would love a PR from you (It should make sense though).
🛣 Roadmap
Check Milestone
License
This project is licensed under the terms of the MIT license.