Welcome to docs

Widgets

Follow the steps below to install the widgets package in your project.

1. Configure Tailwind CSS

Widgets are styled using Tailwind CSS v4. You need to configure Tailwind CSS in your project.

Follow the official Tailwind documentation for installation instructions

2. Install dependencies

Add the following dependencies to your project:

bash

3. Add styles

Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the Shadcn theming section

css

Let Tailwind CSS know where to find the components. Add the following to your styles/globals.css file. The exact path may vary depending on your project structure. It should be relative to your css file

css

4. Dark Mode

The styles that you added in styles/globals.css are already configured for dark mode. To use the dark mode, you can use <ThemeProvider /> and useTheme hook provided in the library to enable it.

tsx

You might run into issues where the theme is not applied correctly when the page is first loaded. This is because the theme is applied after the page is hydrated. To fix this, you can add the following to your head tag.

tsx

You might also see some hydration errors during the development phase. To fix this, you can add the following to your html tag.

tsx

You can create a custom <ThemeToggle /> component to toggle the theme.

Note: this component is also available in the @rlx-components/theme-toggle

tsx

5. Optional styling

If you want to add some custom styling to the library, you can add it to the styles/globals.css file.

css

6. Custom font

You can add font such as Google Fonts to your project.

css

7. Explore the widgets

Some widgets can be used directly in your project. Whereas, some widgets require extra configuration.

Explore the widgets