### Install adonisjs-ui Package

Source: https://github.com/kabbouchi/adonisjs-ui/blob/master/README.md

This command installs the adonisjs-ui package using the AdonisJS CLI. Ensure you have Node.js and npm/yarn installed.

```shell
node ace add adonisjs-ui
```

--------------------------------

### AdonisJS UI Button Component Examples

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Demonstrates the usage of the Button component in AdonisJS UI, showcasing various variants (primary, danger, ghost, outline), sizes, icon integration, and loading states. These examples highlight the flexibility and customization options available for buttons.

```edge
{{-- Basic button with primary variant --}}
@ui.button({ variant: 'primary', size: 'base' })
  Click Me
@end

{{-- Danger button with loading state --}}
<ui:button variant="danger" type="submit">
  Delete Account
</ui:button>

{{-- Ghost button with icon --}}
@component("ui::button", {
  variant: 'ghost',
  size: 'sm',
  icon: 'heroicons:plus'
})
  Add New
@end

{{-- Square icon button --}}
<ui:button :square="true" variant="outline">
  <svg class="size-4">...</svg>
</ui:button>

{{-- Button with custom loading state --}}
<ui:button :loading="isSubmitting" variant="primary">
  Save Changes
</ui:button>
```

--------------------------------

### AdonisJS Dropdown Component Examples

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Illustrates the usage of the Dropdown component in AdonisJS Edge templates for creating interactive menus. Examples include a basic dropdown with links, a dropdown with custom alignment and width, and a user menu dropdown integrated with authentication.

```edge
{{-- Basic dropdown --}}
<ui:dropdown>
  @slot('trigger')
    <ui:button variant="outline">Options</ui:button>
  @end

  @slot('content')
    <a href="/profile" class="block px-4 py-2">Profile</a>
    <a href="/settings" class="block px-4 py-2">Settings</a>
    <a href="/logout" class="block px-4 py-2">Logout</a>
  @end
</ui:dropdown>

{{-- Dropdown with custom alignment and width --}}
<ui:dropdown align="top-12 right-0" width="w-64">
  @slot('trigger')
    <button>
      <ui:badge color="blue">Menu</ui:badge>
    </button>
  @end

  @slot('content')
    <div class="p-4">
      <h3 class="font-semibold">Quick Actions</h3>
      <div class="mt-2 space-y-2">
        <ui:button variant="ghost" size="sm">Action 1</ui:button>
        <ui:button variant="ghost" size="sm">Action 2</ui:button>
      </div>
    </div>
  @end
</ui:dropdown>

{{-- User menu dropdown --}}
@component("ui::dropdown/index", { align: 'top-14', width: 'w-56' })
  @slot('trigger')
    <img src="{{ auth.user.avatar }}" class="size-8 rounded-full" />
  @end

  @slot('content')
    <div class="px-4 py-3 border-b">
      <p class="font-medium">{{ auth.user.name }}</p>
      <p class="text-sm text-zinc-500">{{ auth.user.email }}</p>
    </div>
    <a href="/dashboard" class="block px-4 py-2 hover:bg-zinc-50">Dashboard</a>
    <a href="/logout" class="block px-4 py-2 hover:bg-zinc-50 text-red-600">Logout</a>
  @end
@end
```

--------------------------------

### AdonisJS UI Badge Component Examples

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Provides examples of the Badge component in AdonisJS UI, demonstrating its use for displaying status indicators and labels. Covers different color schemes, shape variants (soft, solid, pill), sizes, and how to render multiple badges in a row or as part of interactive elements.

```edge
{{-- Default badge --}}
<ui:badge>New</ui:badge>

{{-- Colored badges with variants --}}
<ui:badge color="green" variant="soft">Active</ui:badge>
<ui:badge color="red" variant="solid">Urgent</ui:badge>
<ui:badge color="blue" variant="pill">Beta</ui:badge>

{{-- Different sizes --}}
@ui.badge({ color: 'purple', size: 'sm', label: 'Small' })
@end

@ui.badge({ color: 'orange', size: 'lg', label: 'Large' })
@end

{{-- Multiple badges in a row --}}
<div class="flex gap-2">
  <ui:badge color="emerald">Verified</ui:badge>
  <ui:badge color="amber">Premium</ui:badge>
  <ui:badge color="rose">Limited</ui:badge>
</div>

{{-- Badge as button --}}
<button>
  <ui:badge color="cyan" variant="soft">3</ui:badge>
</button>
```

--------------------------------

### AdonisJS UI Input Component Examples

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Illustrates the various configurations and features of the Input component in AdonisJS UI, including labels, descriptions, validation error handling (integrated with flash messages), different variants (outline, filled), and size adjustments. These examples show how to create accessible and functional input fields.

```edge
{{-- Basic input with label --}}
<ui:input
  name="email"
  type="email"
  label="Email Address"
  placeholder="you@example.com"
/>

{{-- Input with description --}}
@ui.input({
  name: 'username',
  label: 'Username',
  description: 'Choose a unique username for your account',
  variant: 'outline',
  size: 'md'
})
@end

{{-- Input with validation (automatic error display) --}}
<ui:input
  name="password"
  type="password"
  label="Password"
  wire:model="password"
  :invalid="true"
/>

{{-- Filled variant input --}}
<ui:input
  name="search"
  variant="filled"
  placeholder="Search..."
  class:input="font-medium"
/>

{{-- Compact input without wrapper --}}
@component("ui::input", {
  name: 'code',
  type: 'text',
  size: 'xs'
})
@end
```

--------------------------------

### Configure AdonisJS UI Provider

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Configures the AdonisJS UI provider within your AdonisJS application. This setup step is crucial for the UI components to be recognized and rendered correctly by the framework.

```typescript
import { configure } from "adonisjs-ui";

// The configure function automatically registers the UI provider
await configure(command);
```

--------------------------------

### AdonisJS Table Component Examples

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Demonstrates the implementation of the Table component in AdonisJS Edge templates. It showcases basic table structure, tables with pagination utilizing database queries, and responsive tables with custom styling. Requires AdonisJS and its Edge templating engine.

```edge
{{-- Basic table structure --}}
<ui:table>
  <ui:table.columns>
    <ui:table.column>Name</ui:table.column>
    <ui:table.column>Email</ui:table.column>
    <ui:table.column>Status</ui:table.column>
  </ui:table.columns>

  <ui:table.rows>
    <ui:table.row>
      <ui:table.cell>John Doe</ui:table.cell>
      <ui:table.cell>john@example.com</ui:table.cell>
      <ui:table.cell>
        <ui:badge color="green">Active</ui:badge>
      </ui:table.cell>
    </ui:table.row>
  </ui:table.rows>
</ui:table>

{{-- Table with pagination --}}
@let(users = await User.query().paginate(page, 15))

<ui:table :paginate="users.serialize()">
  <ui:table.columns>
    <ui:table.column>ID</ui:table.column>
    <ui:table.column>Username</ui:table.column>
    <ui:table.column>Created</ui:table.column>
  </ui:table.columns>

  <ui:table.rows>
    @each(user in users)
      <ui:table.row>
        <ui:table.cell>{{ user.id }}</ui:table.cell>
        <ui:table.cell>{{ user.username }}</ui:table.cell>
        <ui:table.cell>{{ user.createdAt.toFormat('yyyy-MM-dd') }}</ui:table.cell>
      </ui:table.row>
    @endeach
  </ui:table.rows>
</ui:table>

{{-- Responsive table with custom styling --}}
@component("ui::table", { class: 'mt-6' })
  @!component("ui::table/columns")
    @!component("ui::table/column")Name@end
    @!component("ui::table/column")Actions@end
  @end
@end
```

--------------------------------

### AdonisJS Select Component Examples

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Shows how to implement the Select component in AdonisJS Edge templates for form inputs. Covers basic select elements, selects with validation integration, multiple select options, and different variant styles like 'filled' and 'outline'.

```edge
{{-- Basic select --}}
<ui:select name="country" label="Country">
  <option value="">Choose a country</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</ui:select>

{{-- Select with validation --}}
<ui:select
  name="role"
  label="User Role"
  wire:model="userRole"
  :invalid="true"
  variant="outline"
>
  <option value="user">User</option>
  <option value="admin">Administrator</option>
  <option value="moderator">Moderator</option>
</ui:select>

{{-- Multiple select --}}
<ui:select
  name="categories"
  label="Categories"
  :multiple="true"
  size="sm"
>
  @each(category in categories)
    <option value="{{ category.id }}">{{ category.name }}</option>
  @endeach
</ui:select>

{{-- Filled variant select --}}
@component("ui::select", {
  name: 'status',
  variant: 'filled',
  size: 'md'
})
  <option value="draft">Draft</option>
  <option value="published">Published</option>
  <option value="archived">Archived</option>
@end
```

--------------------------------

### Navigation List Component (Edge)

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Illustrates the creation of navigation menus using the navlist component. Examples cover basic lists, nested groups, badges for item counts, and active state management, all within the Edge templating language.

```edge
{{-- Basic navigation list --}}
<ui:navlist>
  <ui:navlist.item href="/dashboard">Dashboard</ui:navlist.item>
  <ui:navlist.item href="/users">Users</ui:navlist.item>
  <ui:navlist.item href="/settings">Settings</ui:navlist.item>
</ui:navlist>

{{-- Navigation with groups and badges --}}
@component("ui::navlist/index")
  @!component("ui::navlist/group", { title: 'Main' })
    @!component("ui::navlist/item", { href: '/dashboard' })
      Dashboard
      @slot('trailing')
        @!component("ui::navlist/badge")3@end
      @end
    @end
    @!component("ui::navlist/item", { href: '/projects' })
      Projects
    @end
  @end

  @!component("ui::navlist/group", { title: 'Settings' })
    @!component("ui::navlist/item", { href: '/profile' })
      Profile
    @end
    @!component("ui::navlist/item", { href: '/preferences' })
      Preferences
    @end
  @end
@end
```

--------------------------------

### Typography Components: Heading, Subheading (Edge)

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Illustrates the use of heading and subheading components for structuring content with consistent styling. Examples include standalone page headings, section headings with subheadings, and hierarchical usage.

```edge
{{-- Page heading --}}
<ui:heading>Dashboard Overview</ui:heading>

{{-- Section heading with subheading --}}
<ui:heading>User Settings</ui:heading>
<ui:subheading>Manage your account preferences and profile information</ui:subheading>

{{-- Multiple levels --}}
@ui.heading()
  Account Management
@end

@ui.subheading()
  Configure your account settings below
@end

<div class="mt-6">
  <ui:input name="displayName" label="Display Name" />
</div>
```

--------------------------------

### Separator Component (Edge)

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Demonstrates the basic usage and application of the separator component for visually dividing content sections. Examples show standalone usage and placement between different content blocks or list items.

```edge
{{-- Basic separator --}}
<ui:separator />

{{-- Between sections --}}
<div>Section 1 content</div>
<ui:separator />
<div>Section 2 content</div>

{{-- In a list --}}
<div class="py-2">Item 1</div>
@component("ui::separator")
@end
<div class="py-2">Item 2</div>
```

--------------------------------

### Global $ui Helper for Styling (Edge)

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Shows how to leverage the global $ui helper in Edge templates to access and apply component styling functions directly. Examples include customizing button, input, and badge components with dynamic styles and combining them with custom classes.

```edge
{{-- Use TV functions directly --}}
@let(buttonStyles = $ui.button())

<button class="{{ buttonStyles.base({ variant: 'primary', size: 'sm' }) }}">
  Custom Button
</button>

{{-- Access input styles --}}
@let(inputStyles = $ui.input({ invalid: true }))

<input class="{{ inputStyles.input() }}" />

{{-- Combine with custom classes --}}
@let(badgeStyles = $ui.badge())

<span class="{{ badgeStyles({ color: 'green', class: 'font-bold' }) }}">
  Status
</span>
```

--------------------------------

### Render UI Button Component

Source: https://github.com/kabbouchi/adonisjs-ui/blob/master/README.md

Demonstrates multiple ways to render a primary button using the adonisjs-ui package within Edge templates. It shows direct Edge syntax, component usage, and integration with `edge-tags` for a more HTML-like syntax. Ensure the UI package is properly installed and imported.

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

```edge
<!-- or -->

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

```edge
<!-- or -->

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

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

--------------------------------

### Form Components: Label, Description, Error (Edge)

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Demonstrates the usage of standalone label, description, and error components for form inputs. It also shows a complete field example integrating all helpers and custom styled errors using Edge component syntax.

```edge
{{-- Standalone label --}}
<ui:label>Full Name</ui:label>
<input type="text" name="fullName" />

{{-- Description text --}}
<ui:description>
  Your password must be at least 8 characters long
</ui:description>

{{-- Error message display --}}
<ui:error name="email" />

{{-- Complete field with all helpers --}}
<ui:field>
  <ui:label>Email Address</ui:label>
  <ui:description>We'll never share your email</ui:description>
  <input type="email" name="email" />
  <ui:error name="email" />
</ui:field>

{{-- Custom styled error --}}
@component("ui::error", {
  name: 'password',
  class: 'text-sm font-bold'
})
@end
```

--------------------------------

### Custom Tag Syntax Conversion (Edge)

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Explains the custom tag compiler that converts HTML-like <ui:component> syntax into Edge component calls. It provides equivalent examples for button and separator components, including self-closing tags, bound attributes, and dynamic values.

```edge
{{-- All three syntaxes are equivalent --}}

{{-- HTML-like syntax (compiled by UiTagCompiler) --}}
<ui:button type="primary">Click Me</ui:button>

{{-- Edge component syntax --}}
@component("ui::button", { type: 'primary' })
  Click Me
@end

{{-- Edge shorthand syntax --}}
@ui.button({ type: 'primary' })
  Click Me
@end

{{-- Self-closing tags --}}
<ui:separator />
<ui:input name="email" />

{{-- Bound attributes with colon --}}
<ui:button :disabled="isSubmitting" :loading="isLoading">
  Submit
</ui:button>

{{-- Dynamic values with double curly braces --}}
<ui:badge color="{{ user.status }}">{{ user.statusLabel }}</ui:badge>
```

--------------------------------

### Textarea Component (Edge)

Source: https://context7.com/kabbouchi/adonisjs-ui/llms.txt

Shows how to implement textarea components, including basic usage, validation support, and different styling variants like 'outline' and 'filled'. It also demonstrates custom component invocation with parameters.

```edge
{{-- Basic textarea --}}
<ui:textarea
  name="bio"
  label="Biography"
  placeholder="Tell us about yourself..."
  rows="4"
/>

{{-- Textarea with validation --}}
<ui:textarea
  name="description"
  label="Description"
  wire:model="description"
  variant="outline"
  size="md"
  :invalid="true"
/>

{{-- Filled variant --}}
@component("ui::textarea", {
  name: 'notes',
  label: 'Notes',
  variant: 'filled',
  rows: 6
})
@end
```

--------------------------------

### Import Tailwind CSS and AdonisJS UI

Source: https://github.com/kabbouchi/adonisjs-ui/blob/master/README.md

This CSS snippet imports Tailwind CSS and adonisjs-ui into your main CSS file. This is necessary for the UI components to be styled correctly. Ensure the path `resources/css/app.css` is your project's main CSS entry point.

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

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.