### Install Oruga with Yarn

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/index.md

Install the Oruga UI package using Yarn.

```bash
yarn add @oruga-ui/oruga-next
```

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

### Install Oruga Theme with Yarn

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Install the Oruga theme package using Yarn.

```bash
yarn add @oruga-ui/theme-oruga
```

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

### Install Bootstrap Theme with Npm

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Install the Bootstrap theme package using npm.

```bash
npm install @oruga-ui/theme-bootstrap
```

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

### Install Oruga Theme with Npm

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Install the Oruga theme package using npm.

```bash
npm install @oruga-ui/theme-oruga
```

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

### Install Bootstrap Theme with Yarn

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Install the Bootstrap theme package using Yarn.

```bash
yarn add @oruga-ui/theme-bootstrap
```

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

### Install Oruga Theme Package

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/index.md

Install the default Oruga theme package using npm, yarn, or via CDN.

```bash
npm install @oruga-ui/theme-oruga
```

```bash
yarn add @oruga-ui/theme-oruga
```

```html
<link
    rel="stylesheet"
    href="https://unpkg.com/@oruga-ui/theme-oruga/dist/oruga.min.css" />
```

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

### Install Oruga with CDN

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/index.md

Include the Oruga UI library using a CDN link.

```html
<script src="https://unpkg.com/@oruga-ui/oruga-next/dist/oruga.js"></script>
```

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

### Install Bulma Theme with Yarn

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Install the Bulma theme package for Oruga UI using Yarn.

```bash
yarn add @oruga-ui/theme-bulma
```

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

### Install Bulma Theme with Npm

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Install the Bulma theme package for Oruga UI using npm.

```bash
npm install @oruga-ui/theme-bulma
```

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

### Install Oruga UI

Source: https://github.com/oruga-ui/oruga/blob/develop/README.md

Install the Oruga UI package using npm. This is the first step to integrate Oruga into your Vue.js project.

```bash
npm install @oruga-ui/oruga-next
```

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

### Basic Upload Component

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Upload.md

This is a basic example of the Upload component. It allows users to select files from their device.

```html
<o-upload></o-upload>
```

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

### Basic Icon Usage

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Icon.md

A basic example of how to render an icon component. This will display a default icon if no specific icon is provided.

```html
<o-icon></o-icon>
```

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

### Menu Role Configuration Example

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Menu.md

Example of configuring the 'role' prop for the Menu component. This sets the ARIA role for the list container, impacting accessibility. The default is 'tree' from the config.

```html
<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>menu: {
  role: "tree"
}</code>
```

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

### Use Globally Registered Component in SFC

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/index.md

Example of using a globally registered Oruga component within a Single File Component (SFC).

```html
<template>
    <o-button>oruga-ui</o-button>
</template>
```

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

### Input Icon Pack Prop Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Input.md

Configure the 'iconPack' prop for the Input component to specify the icon pack to use. Examples include 'mdi', 'fa', or custom packs. Default is undefined.

```javascript
input: {
  iconPack: undefined
}
```

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

### Global Static Class Configuration for Buttons

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/configuration.md

Configure static CSS classes for all buttons globally by providing a configuration object to the Oruga plugin. This example sets 'btn' and 'btn-disabled' classes.

```typescript
import { createApp } from 'vue';
import Oruga from '@oruga-ui/oruga-next';

const myConfig = {
    button: {
        rootClass: 'btn',
        disabledClass: 'btn-disabled',
    }
}

createApp(...)
    .use(Oruga, myConfig);
```

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

### Notification Position Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Notification.md

Configure the default position for notifications via the global config. This example sets the default position to 'top'.

```javascript
notification: {
  position: "top"
}
```

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

### Datepicker Placeholder Example

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Datepicker.md

Sets a placeholder for the input field of the datepicker.

```html
<o-datepicker placeholder="Input placeholder"></o-datepicker>
```

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

### Import Oruga Theme SCSS

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Import the SCSS version of the Oruga theme to enable SASS/SCSS variable customization. Ensure 'sass' and 'sass-loader' are installed if needed.

```javascript
import "@oruga-ui/theme-oruga/dist/scss/oruga.scss";
```

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

### Tooltip Max Width Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Tooltip.md

The maximum width of the tooltip content can be limited. This example shows the default configuration value for `maxWidth`.

```html
<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tooltip: {<br>&nbsp;&nbsp;maxWidth: undefined<br>}</code>
```

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

### Global Dynamic Class Configuration for Button Variants

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/configuration.md

Dynamically configure button classes based on props like 'disabled' and 'variant'. This example applies variant classes only when the button is not disabled.

```javascript
const myConfig = {
    button: {
        rootClass: (_, props) => {
            const classes = ["btn"];
            if (props.iconRight) classes.push("has-icons-right");
            return classes;
        },
        variantClass: (suffix, props) => {
            if (!props.disabled) return `btn-${suffix}`;
        },
    },
};

// With the configuration above:
// <o-button variant="primary" /> will render <button class="btn btn--primary"></button>
// <o-button variant="primary" disabled /> will render <button class="btn"></button>
```

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

### Menu Item Tag Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Menu.md

Configure the default HTML tag for menu items. This example shows setting it to 'PlainButton' via the config.

```javascript
menu: {
  itemTag: PlainButton
}
```

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

### Datepicker Position Example

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Datepicker.md

Configures the position of the dropdown relative to the input. Defaults to 'auto'.

```html
<o-datepicker position="top-right"></o-datepicker>
```

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

### Tooltip Default Open on Click Behavior

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Tooltip.md

By default, the tooltip does not open on click. This example shows the default configuration value for `openOnClick`.

```html
<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tooltip: {<br>&nbsp;&nbsp;openOnClick: false<br>}</code>
```

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

### Button Tag Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Button.md

Configure the default HTML tag for the Button component. This example shows setting the default tag to 'button' from the configuration.

```javascript
button: {
  tag: "button"
}
```

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

### TreeItem Component Basic Usage

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Tree.md

This snippet shows the basic HTML structure for rendering a TreeItem component. No specific setup or imports are required for this basic usage.

```html
<o-tree-item></o-tree-item>
```

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

### Dialog Icon Pack Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Dialog.md

Configure the `iconPack` for the dialog's close icon. This can be set globally via the config or passed as a prop. The example shows the default configuration.

```html
<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dialog: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code>
```

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

### Global Dynamic Class Configuration for Dropdown Position

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/configuration.md

Dynamically configure CSS classes based on component props. This example defines a function for `positionClass` in Dropdowns to append a suffix based on the menu position.

```typescript
const myConfig = {
    dropdown: {
        rootClass: ["dropdown-root", "additional-class"],
        positionClass: (suffix) => `dropdown-menu-${suffix}`,
    },
};
```

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

### Datepicker First Week Rules

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Datepicker.md

Defines the rules for the first week of the year. For example, '4' means the first week starts on January 4th.

```html
<o-datepicker rules-for-first-week="4"></o-datepicker>
```

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

### Import Oruga SCSS Theme

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/index.md

Import the default Oruga SCSS theme file into your project.

```scss
@import "@oruga-ui/theme-oruga/dist/scss/oruga.scss";
```

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

### Basic Menu Item Usage

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Menu.md

Demonstrates the basic structure for a menu item within the Oruga UI framework. This is a foundational element for building menus.

```html
<o-menu-item></o-menu-item>
```

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

### Basic Notification

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Notification.md

A basic, empty notification component. Use this as a starting point for custom notifications.

```html
<o-notification></o-notification>
```

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

### Listbox Icon Pack Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Listbox.md

Shows how to configure the 'iconPack' prop, which specifies the icon library to use. The default value can be set in the Oruga config.

```html
listbox: {
  iconPack: undefined
}
```

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

### Steps Icon Pack Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Steps.md

Set the icon pack for navigation buttons. Defaults to 'mdi'.

```javascript
steps: {
  iconPack: undefined
}
```

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

### Carousel Indicator Style Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Carousel.md

Customize the visual style of the indicators. The 'dots' style is shown as an example.

```javascript
carousel: {
  indicatorStyle: "dots"
}
```

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

### Steps Size Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Steps.md

Define the size of the steps. Defaults to undefined.

```javascript
steps: {
  size: undefined
}
```

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

### Basic Button Usage

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Button.md

Renders a default button. Use the 'label' prop or the default slot for content.

```html
<o-button></o-button>
```

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

### TableColumn Component Usage

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Table.md

Use the o-table-column component to define a column within the table. This is a basic HTML structure example.

```html
<o-table-column></o-table-column>
```

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

### Basic Steps Component

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Steps.md

This is the basic structure for the Steps component. It's used to create a wizard or break down a process into multiple steps.

```html
<o-steps></o-steps>
```

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

### Select Component Default Size Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Select.md

Configure the default size for the select component via the global configuration.

```javascript
select: {
  size: undefined
}
```

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

### Basic Tree Component Usage

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Tree.md

This snippet shows the basic integration of the Tree component. Ensure you have the Oruga UI library included in your project.

```html
<o-tree></o-tree>
```

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

### Override Dropdown Styles with TailwindCSS

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Example of styling a dropdown component using Oruga's default stylesheet with TailwindCSS utility classes.

```css
.dropdown {
    @apply inline-flex relative;
}
.dropdown-menu {
    top: 100%;
    min-width: 12em;
    @apply absolute bg-white left-0 m-0 px-2 shadow-lg rounded-sm z-10;
}
.dropdown-item {
    @apply relative block no-underline px-1 py-2 cursor-pointer;
}
```

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

### Basic Collapse Component

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Collapse.md

The fundamental structure of an Oruga Collapse component.

```html
<o-collapse></o-collapse>
```

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

### Include Oruga Theme via CDN

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Link the Oruga theme stylesheet directly from a CDN.

```html
<link
    rel="stylesheet"
    href="https://unpkg.com/@oruga-ui/theme-oruga/dist/theme.css" />
```

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

### Import and Use Single Component Separately

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/index.md

Import and use an individual Oruga component directly in your script setup without global registration.

```vue
<script setup>
import { OButton } from "@oruga-ui/oruga-next";
</script>

<template>
    <o-button>oruga-ui</o-button>
</template>
```

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

### Dropdown Tooltip Open on Click Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Dropdown.md

Configure the Dropdown to open its tooltip when the trigger is clicked. This is part of the global configuration.

```javascript
tooltip: {
  openOnClick: true
}
```

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

### Import Oruga Theme Stylesheet

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Import the Oruga theme's default stylesheet directly into your project.

```javascript
import "@oruga-ui/theme-oruga/style.css";
```

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

### Loading Icon Size Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Loading.md

Set the icon size for the loading component via the global configuration. Available options are 'small', 'medium', and 'large'.

```javascript
loading: {
  iconSize: "medium"
}
```

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

### Tooltip Default Open on Context Menu Behavior

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Tooltip.md

By default, the tooltip does not open on right-click (context menu). This example shows the default configuration value for `openOnContextmenu`.

```html
<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tooltip: {<br>&nbsp;&nbsp;openOnContextmenu: false<br>}</code>
```

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

### Customize Global CSS Variables

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Globally override Oruga theme variables using CSS custom properties. This example changes the primary and danger variants.

```css
:root {
    --oruga-variant-primary: green;
    --oruga-variant-danger: red;
}
```

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

### Basic Collapse Usage

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Collapse.md

A simple Oruga Collapse component. Use v-model:open for two-way binding of the open state.

```html
<o-collapse>
  <template #trigger>
    <button>More information</button>
  </template>
  <template #default>
    <div>
      <p>This is the content that will be hidden or shown.</p>
    </div>
  </template>
</o-collapse>
```

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

### Create Oruga Instance

Source: https://github.com/oruga-ui/oruga/blob/develop/README.md

Create a new Oruga instance using the `createOruga` composable and register it with your Vue application using `app.use()`. This is essential for initializing Oruga globally.

```javascript
import { createApp } from "vue"
import { createOruga } from "@oruga-ui/oruga-next"

const oruga = createOruga()

createApp(...).use(oruga, {
  // here goes the global config
})
```

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

### Collapse with Open State Binding

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Collapse.md

Demonstrates two-way binding for the open state using v-model:open.

```html
<template>
  <o-collapse v-model:open="isOpen">
    <template #trigger>
      <button>More information</button>
    </template>
    <template #default>
      <div>
        <p>This is the content that will be hidden or shown.</p>
      </div>
    </template>
  </o-collapse>
  <p>Collapse is open: {{ isOpen }}</p>
</template>

<script setup>
import { ref } from 'vue'

const isOpen = ref(true)
</script>
```

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

### Global Multiple Static Class Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/configuration.md

Assign multiple static CSS classes to a component globally. This example adds 'btn' and 'text-color-red' to the root class of buttons.

```typescript
const myConfig = {
    button: {
        rootClass: ["btn", "text-color-red"],
        disabledClass: "btn-disabled",
    },
};
```

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

### Register Oruga Instance with Global Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/index.md

Create and register an Oruga instance with optional global configuration for your Vue application.

```javascript
import { createApp } from "vue";
import { createOruga } from "@oruga-ui/oruga-next";
import App from "./App.vue";

const oruga = createOruga();
const app = createApp(App);

app.use(oruga, {
    // here goes the global config
});
```

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

### Steps Mobile Breakpoint Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Steps.md

Set the mobile breakpoint for responsive behavior. Defaults to undefined.

```javascript
steps: {
  mobileBreakpoint: undefined
}
```

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

### Dropdown Tooltip Open on Context Menu Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Dropdown.md

Configure the Dropdown to open its tooltip when the trigger is right-clicked. This is part of the global configuration.

```javascript
tooltip: {
  openOnContextmenu: false
}
```

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

### Input Icon Prop Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Input.md

Configure the 'icon' prop for the Input component to display an icon. Default is undefined.

```javascript
input: {
  icon: undefined
}
```

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

### Basic Loading Overlay

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Loading.md

A simple loading overlay component. Use this to indicate that content is being loaded or processed.

```html
<o-loading></o-loading>
```

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

### Default iconPack Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Pagination.md

Sets the default icon pack for pagination icons via global configuration.

```javascript
pagination: {
  iconPack: undefined
}
```

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

### Import useOruga Composable

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/composables.md

Import the `useOruga` composable from the Oruga Next library.

```typescript
import { useOruga } from "@oruga-ui/oruga-next";
```

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

### Modal Overlay Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Modal.md

Enable or disable the overlay background for the modal. Defaults to true.

```javascript
modal: {
  overlay: true
}
```

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

### Steps Variant Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Steps.md

Set the color variant for the steps. Defaults to undefined.

```javascript
steps: {
  variant: undefined
}
```

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

### Select Component Status Icon Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Select.md

Enable the status icon for the select component through global configuration.

```javascript
{
  statusIcon: true
}
```

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

### Input Size Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Input.md

Configure the default size for input elements via the `config.input.size` setting. Available options are `small`, `medium`, and `large`.

```javascript
<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {
  size: undefined
}</code>
```

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

### Open Programmatic Component with useOruga

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/composables.md

Use the `useOruga()` composable to access component factories and open new instances. The `open()` function takes component props and a target element for mounting.

```typescript
import { useOruga } from "@oruga-ui/oruga-next";

const oruga = useOruga();

const target = document.body;

oruga.sidebar.open(
    // component props and events
    {
        component: MyCoolComponent,
        fullheight: true,
        overlay: true,
    },
    // target container the programmatic component get rendered into
    target,
);
```

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

### Configure Bootstrap Theme in Vue App

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Import and configure the Bootstrap theme within a Vue application using Oruga.

```js
import {
    createApp
} from 'vue'

import Oruga from '@oruga-ui/oruga-next';

import { bootstrapConfig } from '@oruga-ui/theme-bootstrap';

import '@oruga-ui/theme-bootstrap/style.css';

createApp(...)
    .use(Oruga, bootstrapConfig)
    .mount('#app')
```

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

### Basic Pagination Component

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Pagination.md

Renders a basic pagination navigation. This is the root element for the pagination component.

```html
<o-pagination></o-pagination>
```

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

### Dropdown Tooltip Open on Focus Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Dropdown.md

Configure the Dropdown to open its tooltip when the trigger receives focus. This is part of the global configuration.

```javascript
tooltip: {
  openOnFocus: false
}
```

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

### ListItem Component Usage

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Listbox.md

Demonstrates the basic usage of the ListItem component, which is an option item used within the Listbox component.

```html
<o-list-item></o-list-item>
```

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

### Modal Icon Pack Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Modal.md

Set the icon pack for the modal component. Defaults to 'mdi'.

```javascript
modal: {
  iconPack: undefined
}
```

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

### Steps Label Position Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Steps.md

Configure the position of the step labels. Defaults to 'bottom'.

```javascript
steps: {
  labelPosition: "bottom"
}
```

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

### Open Programmatic Component

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/composables.md

Use the `oruga.programmatic.open()` function to render a custom component programmatically. Specify the component, render options like props and onClose handlers, and the target DOM element.

```typescript
import { useOruga } from "@oruga-ui/oruga-next";
import MyComponent from "...";

const oruga = useOruga();

const slot = "My default slot content";

oruga.programmatic.open(
    // component to render
    MyComponent,
    {
        // HTML #id of the app div rendered into the target container
        appId: "programmatic-app",
         // component specific props
        props: { ... },
        // on close event handler
        onClose: (...args: unknown[]) => { ... },
    },
    // target container the programmatic component get rendered into
    target: document.body,
);
```

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

### Basic Modal

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Modal.md

A basic Oruga UI modal overlay. Use the ODialog component for new implementations as Modal is deprecated.

```html
<o-modal></o-modal>
```

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

### Default Value for animation prop

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Tabs.md

Illustrates the default animation transitions for the `animation` prop from the global config.

```javascript
tabs: {
  animation: [ "slide-next", "slide-prev", "slide-down", "slide-up",]
}
```

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

### Basic Skeleton

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Skeleton.md

A simple skeleton element to use as a placeholder.

```html
<o-skeleton></o-skeleton>
```

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

### Default Animation Array

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Steps.md

The `animation` prop accepts an array of strings for transition animations, with a default configuration provided.

```html
<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>steps: {
  animation: [ "slide-next", "slide-prev", "slide-down", "slide-up",]
}</code>
```

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

### Input HTML5 Validation Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Input.md

Enable native HTML5 validation by setting `config.useHtml5Validation` to `true`.

```javascript
<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{
  useHtml5Validation: true
}</code>
```

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

### Configure Table Show Detail Icon

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Table.md

Set the `showDetailIcon` prop to control the visibility of the detail icon and column. This can be configured globally via the table config.

```javascript
table: {
  showDetailIcon: true
}
```

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

### Include Bulma Theme via CDN

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Link the Bulma theme stylesheet directly from a CDN.

```html
<link
    rel="stylesheet"
    href="https://unpkg.com/@oruga-ui/theme-bulma/dist/theme.css" />
```

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

### Basic TabItem Component Usage

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Tabs.md

Shows the basic structure for using the TabItem component within the Tabs component.

```html
<o-tab-item></o-tab-item>
```

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

### Steps Previous Icon Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Steps.md

Define the icon for the previous navigation button. Defaults to 'chevron-left'.

```javascript
steps: {
  iconPrev: "chevron-left"
}
```

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

### Dialog Backdrop Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Dialog.md

Configure the backdrop overlay for modal dialogs. This is set globally via the config object.

```javascript
dialog: {
  backdrop: true
}
```

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

### Basic Table Component

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Table.md

This snippet shows the basic usage of the Oruga UI Table component. It requires no additional props for a default table structure.

```html
<o-table></o-table>
```

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

### Input Icon Right Prop Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Input.md

Configure the 'iconRight' prop for the Input component to display an icon on the right side. Default is undefined.

```javascript
input: {
  iconRight: undefined
}
```

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

### Default iconNext Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Pagination.md

Sets the default icon for the next page button via global configuration.

```javascript
pagination: {
  iconNext: "chevron-right"
}
```

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

### Basic Listbox

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Listbox.md

A simple Oruga UI Listbox component. Use this as a base for more complex configurations.

```html
<o-listbox></o-listbox>
```

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

### Input Status Icon Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Input.md

Enable the display of status icons by setting `config.statusIcon` to `true`. This works in conjunction with the `field` and `variant` props.

```javascript
<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{
  statusIcon: true
}</code>
```

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

### Taginput Teleport Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Taginput.md

Configure the teleportation behavior for the Taginput component via global configuration.

```javascript
taginput: {
  teleport: false
}
```

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

### Taginput Default Icon Pack Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Taginput.md

Defines the icon pack to be used for the Taginput's icon. Supports 'mdi', 'fa', and other custom packs. Configurable globally.

```javascript
taginput: {
  iconPack: undefined
}
```

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

### Basic Datetimepicker

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Datetimepicker.md

A simple datetimepicker input. It opens a dropdown/modal for date and time selection.

```html
<o-datetimepicker></o-datetimepicker>
```

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

### Include Bootstrap Theme via CDN

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/themes.md

Link the Bootstrap theme's CSS file using a CDN for direct inclusion in HTML.

```html
<link
    rel="stylesheet"
    href="https://unpkg.com/@oruga-ui/theme-bootstrap/dist/theme.css" />
```

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

### Basic Switch Component

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Switch.md

A simple Oruga UI Switch component. Use this for basic on/off toggling functionality.

```html
<o-switch></o-switch>
```

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

### Registering OrugaConfig Plugin

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/composables.md

Enable the programmatic config interface when using individual component plugins by registering the `OrugaConfig` plugin. An optional config object can be passed.

```typescript
import { createApp } from 'vue';
import { Autocomplete, Sidebar, OrugaConfig, useOruga } from '@oruga-ui/oruga-next';

const myConfig = { ... };

createApp(...)
    // register individual components by using their dedicated vue plugin
    .use(Autocomplete)
    .use(Sidebar)
    // register the global oruga config plugin
    .use(OrugaConfig, myConfig);

const oruga = useOruga();

// now this is available
const config = oruga.config.getOptions();

config.setOption("autocomplete", {
    rootClass: 'autocomplete-root',
    itemClass: 'autocomplete-item',
    ...
});

config.setOption("sidebar", { ... });
```

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

### Configure Table Show Header

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Table.md

Control the visibility of the table header using the `showHeader` prop. This setting can also be applied globally through the table configuration.

```javascript
table: {
  showHeader: true
}
```

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

### Autocomplete Icon Pack Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Autocomplete.md

Sets the icon pack to be used for the autocomplete input's icon. Supported packs include 'mdi', 'fa', 'fas', and any custom packs. This is configured via the global config.

```javascript
autocomplete: {
  iconPack: undefined
}
```

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

### Datepicker Creator Configuration

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Datepicker.md

Configure the date creator function for the Datepicker. Defaults to `new Date()`.

```javascript
datepicker: {
  creator: undefined
}
```

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

### Basic Sidebar Usage

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/components/Sidebar.md

This is the most basic implementation of the Sidebar component. It can be used as an overlay for navigation, shopping carts, and more.

```html
<o-sidebar></o-sidebar>
```

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

### Programmatic Config with useProgrammaticConfig

Source: https://github.com/oruga-ui/oruga/blob/develop/packages/docs/documentation/composables.md

Customize individual components programmatically using the `useProgrammaticConfig()` composable. It offers the same functionality as the interface provided by `useOruga()` for component-specific settings.

```typescript
import { useProgrammaticConfig, type OrugaOptions } from '@oruga-ui/oruga-next';

// get the current config
const config = useProgrammaticConfig().getOptions();

// modify the config object
const myThemeConfig: OrugaOptions = {
    ...config,
    autocomplete: {
        rootClass: 'autocomplete-root',
        itemClass: 'autocomplete-item',
        ...
    }
}

// update the config
useProgrammaticConfig().setOptions(myThemeConfig);
```