rooomUI

Tailwind Plugin with common layout components. No JavaScript needed, usable with any Framework.

Installation

Install the package and add it to your tailwind configuration

$ npm install --save-dev @rooom/rooom-ui

// import the plugin
const rooomUI = require("@rooom/rooom-ui");

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ["./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}"],
	theme: {
		extend: {},
	},

	// add the plugin
	plugins: [rooomUI],
};

Documentation

Documentation is available at here.

In order to use the documentation you have to install its dependencies and either build it or start it in live mode. The documentation will be build in docs/build/

$ npm install # install plugin dependencies

$ npm run docs:install # install doc dependencies

$ npm run docs:dev # start live mode

$ npm run docs:build # build static

Contents

Utilities

• [x] Colors
• [x] Gradients
• [x] Patterns
• [x] Masks
• [x] Scrollbar

Components

• [x] Buttons
• [x] Links
• [x] Toggles
• [x] Switches
• [x] Checkboxes
• [x] Radio Buttons
• [x] Ranges
• [x] Badges
• [x] Tooltips
• [x] Dividers
• [x] Input Fields
• [x] Textareas
• [x] Selects
• [x] Loading Spinner
• [x] Tabs
• [ ] Alerts

Layouts

• [ ] Tables
• [x] Button Groups
• [ ] Input Groups
• [ ] Cards
• [x] Menus
• [ ] Collapsibles
• [ ] Pagination
• [ ] Breadcrumbs