Components

::badge
**v4.0.0**
::

::callout{icon="i-lucide-square-play" color="neutral" to="/pricing"}
This is a `callout` with full **markdown** support.
::

::card{title="Live Chat" icon="i-lucide-message-circle" color="primary" to="/live-chat"}
Best suited for real-time customer support and instant communication with your visitors.
::

::code-collapse

```css [main.css]
@import "tailwindcss";

@theme static {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}
```

::

::code-group

```bash [pnpm]
pnpm add @yaplet/sdk
```

```bash [yarn]
yarn add @yaplet/sdk
```

```bash [npm]
npm install @yaplet/sdk
```

::

::code-preview
`inline code`

#code
```mdc
`inline code`
```
::

::code-tree{defaultValue="app/app.config.ts"}
```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})
```

```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
```

```ts [app/app.config.ts]
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green'
    }
  }
})
```

```vue [app/app.vue]
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
```

```json [package.json]
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "typecheck": "nuxt typecheck"
  },
  "dependencies": {
    "@iconify-json/lucide": "^1.2.18",
    "@nuxt/ui": "^4.0.0",
    "nuxt": "^4.0.0"
  },
  "devDependencies": {
    "typescript": "^5.8.2",
    "vue-tsc": "^2.2.10"
  }
}
```
::

::collapsible
| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
::

::field{name="apiKey" type="string" required}
The `description` can be set as prop or in the default slot with full **markdown** support.
::

::field-group
::field{name="analytics" type="boolean"}
Default to `false` - Enables analytics for your project.
::

::field{name="storage" type="boolean"}
Default to `false` - Enables storage to store static assets, such as images, videos and more.
::

::field{name="cache" type="boolean"}
Default to `false` - Enables cache storage to cache your server route responses.
::

::field{name="database" type="boolean"}
Default to `false` - Enables SQL database to store your application's data.
::
::

::icon{name="i-lucide-message-circle"}

:kbd{value="meta"} :kbd{value="K"}

::steps{level="4"}

#### Add the Nuxt UI module in your `nuxt.config.ts`

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
```

#### Import Tailwind CSS in your CSS

```css [assets/css/main.css]
@import "tailwindcss";
```

#### Start your development server

```bash
npm run dev
```

::

::tabs
:::tabs-item{label="Code" icon="i-lucide-code"}
```mdc
::callout
This is a callout with full markdown support.
::
```
:::

:::tabs-item{label="Preview" icon="i-lucide-eye"}
::callout
This is a callout with full markdown support.
::
:::
::