adonisjs-ui/README.md

[](https://npmjs.com/package/adonisjs-ui) [](https://npm.chart.dev/adonisjs-ui)

# adonisjs-ui

[![npm version](https://img.shields.io/npm/v/adonisjs-ui?color=yellow)](https://npmjs.com/package/adonisjs-ui)
[![npm downloads](https://img.shields.io/npm/dm/adonisjs-ui?color=yellow)](https://npm.chart.dev/adonisjs-ui)

## Setup

Install the package:

```sh
node ace add adonisjs-ui
```

Import Tailwind CSS and Adonisjs UI in your CSS

```css
/* resources/css/app.css */

@import "tailwindcss";
@import "adonisjs-ui";
```

## Usage

```edge
@ui.button({ type: 'primary' })
  Button
@end

<!-- or -->

@component("ui::button", { type: 'primary' })
  Button
@end

<!-- or -->

<ui:button type="primary">Button</ui:button>

<!-- or using `edge-tags` -->
<x-ui::button type="primary">Button</x-ui::button>
```

## License

Published under the [MIT](https://github.com/KABBOUCHI/adonisjs-ui/blob/main/LICENSE) license.
Made by [community](https://github.com/KABBOUCHI/adonisjs-ui/graphs/contributors) 💛
<br><br>
<a href="https://github.com/KABBOUCHI/adonisjs-ui/graphs/contributors">
<img src="https://contrib.rocks/image?repo=KABBOUCHI/adonisjs-ui" />
</a>