\n\n## What’s In This Document\n\n- [Dependencies](#dependencies)\n- [Installation](#installation)\n- [Usage](#usage)\n- [The Theme](#the-theme)\n- [The Components, Providers and Hooks](#the-components-providers-and-hooks)\n- [License](#license)\n\n## Dependencies\n\nThis [React](https://reactjs.org/) component library leverages [Styled Components](https://www.styled-components.com/) and [Styled System](https://styled-system.com/) as well as a few other key packages. In order to keep this package light and simple, we don't include them as main dependecies but rather as [peerDependencies](http://npm.github.io/using-pkgs-docs/package-json/types/peerdependencies.html)\n\nThey make our lives easier, but you'll have to make sure your own project includes them as well.\n\n- [react and react-dom](https://reactjs.org/)\n- [styled-components](https://www.styled-components.com/)\n- [styled-system](https://styled-system.com/)\n- [styled-normalize](https://github.com/sergeysova/styled-normalize)\n- [styled-reset](https://github.com/zacanger/styled-reset)\n\n## Local Development - Getting Started\n\n```sh\nnpm install\nnpm link\nnpm run start - builds and watches files for changes\n\n or \n\nnpm run build - only builds\n```\n\n## New Project Installation\n\n```sh\nnpm install --save react react-dom styled-components styled-system styled-normalize styled-reset @rebeldotcom/components\n```\n\nor\n\n```sh\nyarn add react react-dom styled-components styled-system styled-normalize styled-reset @rebeldotcom/components\n```\n\n## Usage\n\nAll of our components and providers are exported by name from `@rebeldotcom/components`, so you can import them with:\n\n```js\nimport {\n Box,\n Button,\n Heading,\n Input,\n ThemeProvider,\n GlobalStyle,\n} from '@rebeldotcom/components'\n```\n\nRebel Components are built using styled-components and styled-system alongside a provided theme.\n\nIn order to use the components, you'll have to bring in the `` and `` into your project to wrap your UI elements.\n\n#### Example\n\n```jsx\n\nimport React from \"react\";\nimport {\n Box,\n Button,\n Heading,\n Input,\n ThemeProvider,\n GlobalStyle\n} from \"@rebeldotcom/components\";\n\nconst App = () => {\n return (\n \n \n \n \n My App here\n \n console.log(\"clicked me\")}\n ariaLabel=\"Click Me\"\n >\n Click Me\n \n \n \n \n );\n};\n\nexport default App;\n\n```\n\n## License\n\nLicensed under the [MIT License](./LICENSE).\n","readmeFilename":"README.md"}
![\"\"](\"https://img.shields.io/npm/v/@rebeldotcom/components?style=for-the-badge\")
\n \n \n ![](\"https://img.shields.io/github/contributors/rebeldotcom/rebel-web-components?style=for-the-badge\")
\n \n \n ![\"\"](\"https://img.shields.io/github/license/rebeldotcom/rebel-web-components?style=for-the-badge\")
\n \n