britzdylan / cabana-ui

Cabana Design System for Tailwind that enables you to start projects faster.

CabanaUI for Tailwind CSS

Introducing Cabana, the TailwindCSS plugin that makes designing beautiful UIs fast and effortless. Cabana comes packed with extended color palettes, shadows, and background blurs, along with a custom Typography Scale System. It also includes pre-designed design elements such as buttons, lists, links, pills, forms, and more, so you can start building stunning designs in just minutes. Cabana is framework agnostic and fully customizable, making it perfect for designers and developers alike.

Features

1. Extended Color Palettes: Access an expanded range of color palettes to create beautiful designs with ease.
2. Extended Shadows: Enhance the depth and dimension of your designs with an extended range of shadow options.
3. Extended Background Blurs: Add depth and texture to your designs with an expanded range of background blur options.
4. Custom Typography Scale System: Enjoy complete control over your typography with a customizable scale system.
5. Pre-Designed Design Elements: Kick-start your projects with a variety of pre-designed design elements, including buttons, lists, links, pills, forms, and more.
6. Javascript Framework Agnostic: Seamlessly integrate your TailwindCSS plugin with any Javascript framework.
7. Customizable: Tailor your plugin to your project's unique needs with full customization options.

Install now!

How to get started with using cabana-ui with Tailwind CSS.

Prerequisites

• Tailwind CSS installed and configured in your project.
• PostCSS installed and configured in your project.

1. Install the package

Add the package to your project using your preferred package manager.

npm i cabana-ui
# or
yarn add cabana-ui

2. Update Tailwind config

Add the plugin to your tailwind.config.js file.

// tailwind.config.js
module.exports = {
  plugins: [require('cabana-ui')],
};

🚀 Use

How to use CabanaUI

📘Examples

Vite

List of components

Actions

• Button
• Floating Action Button
• Button Group

Navigation

• Links
• Menu Items
• Pill
• Breadcrumbs
• Pagination
• Tabs

Content

• Lists
• Accordion
• Cards
• Comments
• Chats
• Testimonials
• Carousels
• Pricing Tables
• User Profiles
• Content Blocks

Forms

• Input
• Text Area
• Select
• Toggle
• Radio
• Checkbox
• Range

Overlays

• Toast
• Modal

Design Patterns

• Avatar
• Chip
• Tooltip
• Indicators
• Progress bar
• Rating

Data

• Tables

---

Please share