https://github.com/lskjs/ratsel

🧩 Rätsel — flexible styled component library for React
https://github.com/lskjs/ratsel

css-in-js emotion lskjs react react-components styled styled-components ui-components

Last synced: 1 day ago
JSON representation

🧩 Rätsel — flexible styled component library for React

• Host: GitHub
• URL: https://github.com/lskjs/ratsel
• Owner: lskjs
• License: mit
• Created: 2022-03-06T14:53:45.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-11-07T14:30:17.000Z (11 days ago)
• Last Synced: 2024-11-09T20:08:29.886Z (9 days ago)
• Topics: css-in-js, emotion, lskjs, react, react-components, styled, styled-components, ui-components
• Language: TypeScript
• Homepage: https://lskjs.github.io/ratsel/
• Size: 8.23 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🧩 Rätsel

**Flexible UI components**

Rätsel ([German for puzzle/riddle](https://en.wiktionary.org/wiki/R%C3%A4tsel)) is a flexible styled component library for React.

✂️ Partial import of only the required components

🚀 Based on the performant [emotion](https://github.com/emotion-js/emotion) CSS-in-JS library

👀 Docs / UI preview: https://lskjs.github.io/ratsel/

### How to use

1. You must have React version 18 or higher.

2. Install `@ratsel/core` and any of the selected packages.

    - Example: `npm i @ratsel/core @ratsel/button`

3. Connect the theme provider to the root of the application

    - Example:

      ```js

      import { ThemeProvider } from '@ratsel/core';

      ...

      return (

        

          

          

      );

      ```

    - You can also override the default theme. You need to pass the theme to the ThemeProvider.

      - Option 1:

        ```js

        const theme = {

          fonts: {

            main: 'Helvetica',

          },

        };

        

        ```

      - Option 2:

        ```js

        const theme = (parentTheme) => ({

          ...parentTheme,

          ratsel: {

            ...parentTheme.ratsel,

            fonts: {

              main: 'Helvetica',

            },

          },

        });

        

        ```

4. Use the component you want

   - Example:

     ```js

     import { Button } from '@ratsel/button';

     return (

       A coolest button

     );

     ```