diff --git a/README.md b/README.md new file mode 100644 index 00000000..2f4e6e28 --- /dev/null +++ b/README.md @@ -0,0 +1,118 @@ +css-in-readme + +# Tetrisly React + +🧩 Tetrisly offers user-friendly components designed for effortless integration. Plus, it's fully compatible with fully compatible with Tetrisly for Figma with a seamless design and development experience in mind. + +If you want to know more about Tetrisly, check out our website: [tetrisly.com](https://tetrisly.com/) + +## Tech Stack + +- [React 18](https://react.dev/) +- [xstyled](https://xstyled.dev/) + +We've desided to use `xstyled` for styling our components. If you are interested in our reasoning, check out our article on this topic: [Style Wars: Tailwind vs. CSS-in-JS in Design Systems Implementation](https://medium.com/tetrisly/style-wars-tailwind-vs-css-in-js-in-design-systems-implementation-de6015ee2695) + +## Installation + +Install tetrisly-react with npm (you can do the same with yarn, pnpm or any other package manager) + +```bash + npm install @virtuslab/tetrisly-react +``` + +## Setup + +After installing the package, you need to wrap your application in the `TetrislyProvider` component. This will provide the theme and other context to your application. + +```typescript +import { TetrislyProvider } from '@virtuslab/tetrisly-react'; + +function App() { + return ( + + + + ) +} +``` + +TetrislyProvider accepts optional prop `theme` which can be used to override default theme. + +You can check out how this object looks like here: [Tetrisly Theme](src/theme/theme.ts) + +```typescript +import { TetrislyProvider } from '@virtuslab/tetrisly-react'; + +function App() { + return ( + + + + ) +} +``` + +## Usage/Examples + +```typescript +import { Button } from '@virtuslab/tetrisly-react'; + +function App() { + return