Twizzle is an open source React UI framework available to build web projects
Twizzle has numerous components that can all be installed using the following commands
npm install @twizzle-library/twizzle-library
or
yarn add npm i @twizzle-library/twizzle-library
To install a local repo verison of the project you can always clone the repo:
git clone https://github.com/ahmedwab/Twizzle
Install dependencies
npm install
or
yarn
Twizzle UI is available with a theme context with a preset list of colors as follows:
primary: {
backgroundColor: '#1E90FF',
color: 'black'
},
loader: {
color: '#1E90FF'
},
variants: {
success: { color: '#339900' },
info: { color: '#99CC33' },
warning: { color: '#FFCC00' },
danger: { color: '#CC3300' }
}
}
To set your own colors, you can invoke the theme context in the index.js/tsx or App.js/tsx of your project.
An example of how you would use a Twizzle component would be as follows:
import {Button} from '@twizzle-library/twizzle-library';
const component = () => {
return (
<Button label="Hello World"/>
)
}
'
If you want to make a contribution to this repo, you will need to fork this repo and creare your own local version.
Once you have the project installed on your device, you can go ahead and install dependencies
npm install
or
yarn add
After that, you will want to get storybook up and running
npm run storybook
or
yarn storybook
Now you can visit http://localhost:6006 and find storybook running
After you're finish with making your change, push everything to your forked repo.
On that note, make sure all the tests are passing.
npm run test
or
yarn test
You can then make a pull request with a description that explains your changes against the Twizzle master branch and wait for a review.
Good Luck!
Twizzle UI is available under the MIT License.