Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/britzdylan/cabana-ui

Cabana Design System for Tailwind that enables you to start projects faster.
https://github.com/britzdylan/cabana-ui

astro cabana cabana-ui components components-and-templates css css-components design-system postcss react-components svelte-components tailwind tailwindcss tailwindcss-plugin ui-design ui-framework uikit ux-design vue-components

Last synced: about 3 hours ago
JSON representation

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

Awesome Lists containing this project

README 

        
# 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.**



[![][banner-url]][docs-url]



[![][install-size]][install-size-url] [![][number-of-components]][docs-url] [![][license]][license-url] [![][dl]][npm-url] [![][stars]][gh-url] [![][commit]][gh-url]



## 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](https://tailwindcss.com) installed and configured in your project.

- [PostCSS](https://postcss.org) installed and configured in your project.



1. Install the package



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



```bash

npm i cabana-ui

# or

yarn add cabana-ui

```



2. Update Tailwind config



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



```js

// tailwind.config.js

module.exports = {

  plugins: [require('cabana-ui')],

};

```



## 🚀 Use



[How to use CabanaUI](http://docs.cabanafortailwind.com/getting-started/use)



## 📘Examples



[Vite](https://stackblitz.com/edit/cabanaui-vite-example?file=package.json)



## List of components



### Actions



- [x] Button

- [x] Floating Action Button

- [x] Button Group



### Navigation



- [x] Links

- [x] Menu Items

- [x] Pill

- [x] Breadcrumbs

- [x] Pagination

- [ ] Tabs



### Content



- [x] Lists

- [x] Accordion

- [ ] Cards

- [ ] Comments

- [ ] Chats

- [ ] Testimonials

- [ ] Carousels

- [ ] Pricing Tables

- [ ] User Profiles

- [ ] Content Blocks



### Forms



- [x] Input

- [x] Text Area

- [x] Select

- [x] Toggle

- [x] Radio

- [x] Checkbox

- [x] Range



### Overlays



- [x] Toast

- [ ] Modal



### Design Patterns



- [x] Avatar

- [x] Chip

- [x] Tooltip

- [x] Indicators

- [x] Progress bar

- [x] Rating



### Data



- [ ] Tables



---



Please share



[![][tweet]][tweet-url]



[gh-url]: https://github.com/britzdylan/cabana-ui

[install-size]: https://badgen.net/bundlephobia/minzip/cabana-ui?label=bundle%20size&color=green

[build]: https://badgen.net/github/checks/britzdylan/cabana-ui?label=build

[npm]: https://badgen.net/github/tag/britzdylan/cabana-ui?label=version&color=green

[dl]: https://badgen.net/npm/dt/cabana-ui?label=installs&icon=npm&color=green

[commit]: https://badgen.net/github/last-commit/britzdylan/cabana-ui?icon=github&color=green

[license]: https://badgen.net/github/license/britzdylan/cabana-ui?color=green

[stars]: https://badgen.net/github/stars/britzdylan/cabana-ui?color=green

[tweet]: https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Fsaadeghi%2Fdaisyui

[install-size-url]: https://bundlephobia.com/result?p=cabana-ui

[license-url]: https://github.com/britzdylan/cabana-ui/blob/master/LICENSE

[npm-url]: https://www.npmjs.com/package/cabana-ui

[unpkg-url]: https://unpkg.com/browse/cabana-ui/

[jsdeliver-url]: https://www.jsdelivr.com/package/npm/cabana-ui

[tweet-url]: https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/britzdylan/cabana-ui

[number-of-components]: https://badgen.net/badge/total%20components/24/green

[docs-url-install]: https://docs.cabanafortailwind.com/getting-started/install

[docs-url]: https://docs.cabanafortailwind.com/

[logo-url]: https://raw.githubusercontent.com/britzdylan/cabana-ui/main/src/docs/public/logo.svg

[banner-url]: https://raw.githubusercontent.com/britzdylan/cabana-ui/main/src/docs/public/og_image.jpg