Relix UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
Based on the Tailwind CSS utility classes, Relix UI's prebuilt components and UI elements help you quickly design and customize responsive mobile-first websites with the components a website needs, including buttons, dropdowns, navigation bars, modals, and more.
Components are grouped by visual usability criteria (components, navigation, forms, etc.) and styled directly on top of Tailwind CSS, making them easy to extend and customize. This is a lifesaver for developers looking to create a unique and eye-catching design system without the hassle of creating each component by hand.
This guide will help you get started with Relix UI, including how to run, customize, update, and integrate your project!
First, you need to make sure that you have a working Tailwind CSS project installed and that you also have Node and NPM installed on your machine.
- Install
relixvia npm
npm i tw-relix- Include Relix UI as a plugin in the
tailwind.config.jsfile
module.exports = {
content: [
'node_modules/tw-relix/dist/*.js'
],
plugins: [
require('tw-relix/plugin')
],
}- Include the JavaScript
<script>that powers the interactive elements near the end of your<body>tag:
<script src="./node_modules/tw-relix/dist/relix.js"></script>
<!-- or -->
<script type="module">
import 'tw-relix'
</script>