### Sigma UI Framework Integration

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/installation.md

Links to documentation for integrating Sigma UI with popular web development frameworks. Each link points to a specific framework's installation guide.

```APIDOC
Vite Integration:
  Link: /docs/installation/vite
  Description: Documentation for installing and using Sigma UI with Vite.

Nuxt Integration:
  Link: /docs/installation/nuxt
  Description: Documentation for installing and using Sigma UI with Nuxt.

Astro Integration:
  Link: /docs/installation/astro
  Description: Documentation for installing and using Sigma UI with Astro.

Laravel Integration:
  Link: /docs/installation/laravel
  Description: Documentation for installing and using Sigma UI with Laravel.
```

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

### Astro Project Setup and Vue Integration

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/installation/astro.md

Commands to create a new Astro project and add Vue integration. Ensure to answer 'Yes' to all prompts during Vue installation for proper setup.

```bash
npm create astro@latest
npx astro add vue
```

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

### Install Navigation Menu

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/navigation-menu.md

Installs the Navigation Menu component using the sigma-ui CLI.

```bash
npx sigma-ui add navigation-menu
```

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

### Install Dependencies

Source: https://github.com/sigma-hub/sigma-ui/blob/main/packages/cli/test/fixtures/nuxt/README.md

Installs project dependencies using different package managers.

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

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

### Start Development Server

Source: https://github.com/sigma-hub/sigma-ui/blob/main/packages/cli/test/fixtures/nuxt/README.md

Starts the Nuxt 3 development server on http://localhost:3000.

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

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

### Install Combobox Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/combobox.md

Instructions for installing the Combobox component using the Sigma UI CLI.

```bash
npx sigma-ui add combobox
```

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

### Install Sigma UI Input

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/input.md

Installs the Sigma UI Input component using npx.

```bash
npx sigma-ui add input
```

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

### Install Label Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/label.md

Command to install the Label component using npx.

```bash
npx sigma-ui add label
```

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

### Install Textarea Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/textarea.md

Installs the Textarea component into your project using the sigma-ui CLI.

```bash
npx sigma-ui add textarea
```

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

### Install Pagination Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/pagination.md

Command to install the Pagination component using the sigma-ui CLI.

```bash
npx sigma-ui add pagination
```

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

### Install Alert Dialog

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/alert-dialog.md

Installs the Alert Dialog component using the sigma-ui CLI.

```bash
npx sigma-ui add alert-dialog
```

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

### Install Tooltip Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/tooltip.md

Installs the Tooltip component into your project using the Sigma UI CLI.

```bash
npx sigma-ui add tooltip
```

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

### Install Toaster Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/toaster.md

Installs the Toaster component using the sigma-ui CLI.

```bash
npx sigma-ui add toaster
```

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

### Install Image Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/image.md

Installs the Image component into your project using the sigma-ui CLI.

```bash
npx sigma-ui add image
```

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

### Install Sigma UI Table

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/table.md

Installs the Sigma UI Table component using npx.

```bash
npx sigma-ui add table
```

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

### Install Sigma UI Context Menu

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/context-menu.md

Installs the Sigma UI Context Menu component using the Sigma UI CLI.

```bash
npx sigma-ui add context-menu
```

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

### Install Tabs Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/tabs.md

Installs the Tabs component using the sigma-ui CLI.

```bash
npx sigma-ui add tabs
```

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

### Install Reka UI Progress Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/progress.md

Instructions for installing the Reka UI library, which includes the Progress component.

```bash
npm install reka-ui
```

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

### Install Sigma UI Resizable

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/resizable.md

Installs the Sigma UI Resizable component using the Sigma UI CLI.

```bash
npx sigma-ui add resizable
```

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

### Install Sigma UI Select

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/select.md

Installs the Sigma UI Select component using the sigma-ui CLI.

```bash
npx sigma-ui add select
```

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

### Install Card Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/card.md

Installs the Card component into your project using the sigma-ui CLI.

```bash
npx sigma-ui add card
```

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

### Install Avatar Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/avatar.md

Installs the Avatar component using the sigma-ui CLI.

```bash
npx sigma-ui add avatar
```

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

### Install Button Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/button.md

Provides the command to install the Button component using npm.

```bash
npx sigma-ui add button
```

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

### Install Hover Card

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/hover-card.md

Installs the Hover Card component using the sigma-ui CLI.

```bash
npx sigma-ui add hover-card
```

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

### Install Dropdown Menu

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/dropdown-menu.md

Command to install the Dropdown Menu component using the Sigma UI CLI.

```bash
npx sigma-ui add dropdown-menu
```

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

### Install Drawer Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/drawer.md

Installs the Drawer component into your project using the Sigma UI CLI.

```bash
npx sigma-ui add drawer
```

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

### Install Dialog Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/dialog.md

Command to install the Dialog component using the Sigma UI CLI.

```bash
npx sigma-ui add dialog
```

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

### Install Skeleton Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/skeleton.md

Installs the Skeleton component into your project using the Sigma UI CLI.

```bash
npx sigma-ui add skeleton
```

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

### Install Tags Input

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/tags-input.md

Command to install the Tags Input component using the Sigma UI CLI.

```bash
npx sigma-ui add tags-input
```

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

### Install Calendar Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/calendar.md

Command to install the Calendar component using the Sigma UI CLI.

```bash
npx sigma-ui add calendar
```

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

### Install PIN Input

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/pin-input.md

Command to install the PIN Input component into your project using the Sigma UI CLI.

```bash
npx sigma-ui add pin-input
```

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

### Install Toggle Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/toggle.md

Command to install the Toggle component into your project using the Sigma UI CLI.

```bash
npx sigma-ui add toggle
```

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

### Accordion Component Examples

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/accordion.md

Examples demonstrating the usage of the Accordion component, including single and multiple expanded item configurations.

```html
<ComponentPreview name="Accordion" class="sm:max-w-[70%]" />

Displays `single` expanded item at once. Controllable by `defaultValue` prop.

### Basic

<ComponentPreview name="AccordionBasic" />

Displays `single` item, collapsed by default (no `defaultValue` or `v-model` props specified).

### Multiple

<ComponentPreview name="AccordionMultiple" />

Displays `multiple` expanded items at once. Controllable programmatically by `v-model`.

## Notes

- Use `defaultValue` prop to simply define the open item by default or use `v-model` prop to fully control the opened item(s) programmatically.

- To display multiple expanded items at once, use `v-model: string[]` and `type="multiple"`.

- To display single expanded item at once, use `v-model: string` and `type="single"`.
```

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

### Manual Installation Dependencies

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/form.md

Lists the npm dependencies required for manual installation of the form components and validation libraries.

```bash
npm install reka-ui vee-validate @vee-validate/zod zod
```

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

### Area Chart Custom Tooltip Example

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/charts/area.md

Illustrates how to implement custom tooltips for the Area Chart component by passing a custom Vue component. Detailed prop information is available in the setup guide.

```vue
<ComponentPreview name="AreaChartCustomTooltip"  />
```

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

### Build for Production

Source: https://github.com/sigma-hub/sigma-ui/blob/main/packages/cli/test/fixtures/nuxt/README.md

Builds the Nuxt 3 application for production deployment.

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

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

### Use SIGMA-UI Button Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/installation/vite.md

Example of importing and using the 'Button' component from SIGMA-UI in a Vue template.

```vue
<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button>Click me</Button>
</template>
```

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

### Preview Production Build

Source: https://github.com/sigma-hub/sigma-ui/blob/main/packages/cli/test/fixtures/nuxt/README.md

Locally previews the production build of the Nuxt 3 application.

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

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

### Import and Use Button Component in Vue

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/installation/vite.md

Demonstrates how to import the 'Button' component from the '@/components/ui/button' path and use it within a Vue.js template. It includes the necessary script setup for TypeScript and the template for rendering the button.

```vue
<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button>Click me</Button>
</template>
```

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

### Sigma-UI Init Command Options

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/cli.md

Provides options for the 'init' command, including skipping confirmation prompts, specifying the working directory, and displaying help.

```txt
Usage: npx sigma-ui[@latest] init [options]

initialize your project and install dependencies

Options:
  -y, --yes        skip confirmation prompt. (default: false)
  -c, --cwd <cwd>  the working directory. (default: the current directory)
  -h, --help       display help for command
```

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

### Vue Pagination Component Usage

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/pagination.md

Example of how to use the Pagination component in a Vue.js application. It shows the setup with various pagination controls like first, previous, next, last, page numbers, and ellipsis.

```vue
<script setup lang="ts">
import {
  Pagination,
  PaginationEllipsis,
  PaginationFirst,
  PaginationLast,
  PaginationList,
  PaginationListItem,
  PaginationNext,
  PaginationPrev,
} from '@/components/ui/pagination'

import {
  Button,
} from '@/components/ui/button'
</script>

<template>
  <Pagination
    v-slot="{ page }"
    :items-per-page="10"
    :total="100"
    :sibling-count="1"
    show-edges
    :default-page="2"
  >
    <PaginationList
      v-slot="{ items }"
      class="flex items-center gap-1"
    >
      <PaginationFirst />
      <PaginationPrev />

      <template v-for="(item, index) in items">
        <PaginationListItem
          v-if="item.type === 'page'"
          :key="index"
          :value="item.value"
          as-child
        >
          <Button
            class="w-10 h-10 p-0"
            :variant="item.value === page ? ' : 'outline'"
          >
            {{ item.value }}
          </Button>
        </PaginationListItem>
        <PaginationEllipsis
          v-else
          :key="item.type"
          :index="index"
        />
      </template>

      <PaginationNext />
      <PaginationLast />
    </PaginationList>
  </Pagination>
</template>
```

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

### Initialize SIGMA-UI

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/introduction.md

Initializes the SIGMA-UI configuration within your project. This is the first step before adding components.

```bash
npx sigma-ui init
```

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

### Install Tailwind CSS Dependencies

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/installation/vite.md

Installs Tailwind CSS and its Vite plugin. Vite includes PostCSS, so it doesn't need to be installed separately.

```bash
npm install -D tailwindcss @tailwindcss/vite
```

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

### Initialize Sigma-UI Project

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/cli.md

Initializes the latest version of SIGMA-UI in a project. It prompts for configuration, installs dependencies, creates necessary files, and prepares the project for component integration. Supports specifying a version and skipping confirmation prompts.

```bash
npx sigma-ui init
npx sigma-ui@latest init
```

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

### Install Node Types

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/installation/vite.md

Optional command to install node types if you encounter errors importing 'path'.

```bash
npm i -D @types/node
```

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

### Sigma UI Command Component Examples

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/command.md

Demonstrates various ways to use the Sigma UI Command component, including basic usage, integration with dialogs, popovers, dropdown menus, responsive implementations, form integration, and as a combobox. These examples highlight the component's flexibility and composability.

```javascript
// Basic Command Menu Usage
<ComponentPreview name="Command" />

// Command Menu in a Dialog
<CommandDialog />

// Command Menu in a Popover
<CommandPopover />

// Command Menu in a Dropdown Menu
<CommandDropdownMenu />

// Responsive Command Menu (Popover on desktop, Drawer on mobile)
<CommandResponsive />

// Command Component within a Form
<CommandForm />

// Command Component as a Combobox (refer to Combobox documentation)
<ComponentPreview name="Command" /> // See Combobox page for more details
```

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

### Install Toggle Group

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/toggle-group.md

Command to install the Toggle Group component using the sigma-ui CLI.

```bash
npx sigma-ui add toggle-group
```

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

### Install Separator Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/separator.md

Command to install the Separator component using the sigma-ui CLI.

```bash
npx sigma-ui add separator
```

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

### Install Popover Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/popover.md

Installs the Popover component using the Sigma UI CLI.

```bash
npx sigma-ui add popover
```

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

### Install Collapsible Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/collapsible.md

Installs the Collapsible component into your project using the sigma-ui CLI.

```bash
npx sigma-ui add collapsible
```

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

### Install Carousel

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/carousel.md

Command to install the carousel component using the sigma-ui CLI.

```bash
npx sigma-ui add carousel
```

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

### Initialize SIGMA-UI in Vite

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/installation/vite.md

Command to initialize SIGMA-UI in an existing Vite-Vue project. Follow the on-screen prompts for configuration.

```bash
npx sigma-ui init
```

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

### Sigma UI Input Component Examples

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/input.md

Demonstrates various ways to use the Sigma UI Input component, including basic usage, file input, disabled states, and inputs with labels, buttons, and icons.

```html
<ComponentPreview name="Input" class="max-w-xs" />
```

```html
<ComponentPreview name="InputFile" class="max-w-xs" />
```

```html
<ComponentPreview name="InputDisabled" class="max-w-xs" />
```

```html
<ComponentPreview name="InputWithLabel" class="max-w-xs" />
```

```html
<ComponentPreview name="InputWithButton" class="max-w-xs" />
```

```html
<ComponentPreview name="InputWithIcon" class="max-w-xs" />
```

```html
<ComponentPreview name="InputForm" />
```

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

### Install @vueuse/core

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/dark-mode/astro.md

Command to install the @vueuse/core package, which provides utility composables for Vue.js applications.

```bash
npm install @vueuse/core
```

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

### Create Laravel Project

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/installation/laravel.md

Command to create a new Laravel project with TypeScript, Breeze, Vue stack, and Git integration.

```bash
laravel new my-app --typescript --breeze --stack=vue --git --no-interaction
```

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

### Install Switch Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/switch.md

Command to install the Switch component into your project using the sigma-ui CLI.

```bash
npx sigma-ui add switch
```

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

### Sigma-UI Add Command Options

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/cli.md

Details the options for the 'add' command, including specifying components, disabling dependency installation, skipping confirmation, overwriting files, setting the working directory, and specifying the path for component addition.

```txt
Usage: npx sigma-ui[@latest] add [options] [components...]

add components to your project

Arguments:
  components         name of components

Options:
  --nodep            disable adding & installing dependencies (advanced) (default: false)
  -y, --yes          Skip confirmation prompt. (default: false)
  -o, --overwrite    overwrite existing files. (default: false)
  -c, --cwd <cwd>    the working directory. (default: the current directory)
  -p, --path <path>  the path to add the component to.
  -h, --help         display help for command
```

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

### Install Reka UI Dependency

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/resizable.md

Installs the Reka UI dependency required for the Resizable component.

```bash
npm install reka-ui
```

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

### Initialize SIGMA-UI CLI

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/installation/nuxt.md

Command to initialize SIGMA-UI within an existing Nuxt project using the command-line interface. Follow the on-screen prompts for configuration.

```bash
npx sigma-ui init
```

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

### Install Scroll-area Component

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/components/scroll-area.md

Installs the Scroll-area component using the Sigma UI CLI.

```bash
npx sigma-ui add scroll-area
```

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

### Add SIGMA-UI Components

Source: https://github.com/sigma-hub/sigma-ui/blob/main/apps/docs/src/content/docs/introduction.md

Adds SIGMA-UI components to your project. After initialization, use this command to bring components into your project's component directory for customization.

```bash
npx sigma-ui add
```