# Tetrisly for React 🧩 Tetrisly offers user-friendly components designed for effortless integration. Plus, it's 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 decided 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 ``` and dependencies: ```bash npm install styled-components @xstyled/styled-components ``` ## Setup ### TetrislyProvider 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. ```jsx import { TetrislyProvider } from '@virtuslab/tetrisly-react'; function App() { return ( ); } ``` TetrislyProvider accepts optional prop `theme` which can be used to override default theme. ```jsx import { TetrislyProvider } from '@virtuslab/tetrisly-react'; function App() { return ( ); } ``` ### Default theme Our default theme contains all of fundamental Tetrisly Design Tokens, you can use it with `xstyled` props to easy set up your design. See `tet.*` utility [example of use](#tet-utility). Here you can see the [default theme](https://github.com/VirtusLab/@tetrisly/react/blob/development/src/theme/defaultTheme.ts) or a complete list of theme options. ### Default font Tetrisly uses [Inter](https://fonts.google.com/specimen/Inter) font as default. To add it to your app you should link it in your root `.html` file: ```html ``` ## `tet.*` utility `tet` function is our extension of xstyled `x.*` utility. Both has the same API, but we will add some extra features in near future. You can read more [here](https://xstyled.dev/docs/utility-props/). ### Example of use ```jsx import { TetrislyProvider, Button, theme, tet, } from '@virtuslab/tetrisly-react'; const App = () => ( Hello world!