{"repo":"VirtusLab/tetrisly-react","free":true,"listed":false,"github":"https://github.com/VirtusLab/tetrisly-react","clone":"git clone https://github.com/VirtusLab/tetrisly-react.git","description":"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.","language":"TypeScript","stars":40,"topics":["design-system","design-tokens","figma","react","styled-components","xstyled"],"license":null,"category":"ui-components","readme_excerpt":"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 Tech Stack - React 18 - xstyled 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 Installation Install tetrisly-react with npm (you can do the same with yarn, pnpm or any other package manager) and dependencies: 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. TetrislyProvider accepts optional prop theme which can be used to override default theme. 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. Here you can see the default theme or a complete list of theme options. Default font Tetrisly uses Inter font as default. To add it to your app you should link it in your root .html file: 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. Example of use Run Locally Clone the ","default_branch":null,"files":null,"tree":[],"storefront":"/r/VirtusLab","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/VirtusLab/tetrisly-react/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}