::alert{icon="lucide:info"}
  An **default** alert with `code` and a [link](/).
::

::alert{type="info" icon="lucide:info"}
  An **info** alert with `code` and a [link](/).
::

::alert{type="success" icon="lucide:lightbulb"}
  A **success** alert with `code` and a [link](/).
::

::alert{type="warning" icon="lucide:triangle-alert"}
  A **warning** alert with `code` and a [link](/).
::

::alert{type="danger" icon="lucide:circle-x"}
  A **danger** alert with `code` and a [link](/).
::

::alert{title="Title" icon="lucide:layout-list"}
  An alert with a title.
::

::alert{to="https://github.com/Abhishek-Mallick/universal-box" target="_blank" icon="lucide:link"}
  A **link** alert.
::

:read-more{to="/getting-started/writing/markdown"}
:read-more{title="Nuxt website" to="https://nuxt.com/"}
:read-more{to="https://nuxt.com/"}

::badge
  Default
::
::badge{type="info"}
  Info
::
:badge[Warning]{type="warning"}
:badge[Danger]{type="danger"}
:badge[Outline]{variant="outline"}
:badge[Secondary]{variant="secondary"}
::badge{variant="outline" type="info" to="https://github.com/Abhishek-Mallick/universal-box" target="_blank"}
  Link
::

::code-group
  ```bash [npm]
  npm run dev
  ```

  ```bash [pnpm]
  pnpm dev
  ```

  ```bash [yarn]
  yarn dev
  ```

  ```bash [bun]
  bun run dev
  ```
::

::card
#title
Card with slots

#description
Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.

#content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

#footer
`Card Footer`
::

::card
---
title: Card with props
description: Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
footer: Card Footer
icon: 'lucide:box'
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
::

::card
---
to: https://github.com/Abhishek-Mallick/universal-box
target: _blank
---
#title
Card with link

#content
Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
::

::card-group
  ::card
  ---
  title: Components
  icon: i-heroicons-cube
  to: https://nuxt.com/docs/api/components/client-only
  target: _blank
  ---
  Explore Nuxt built-in components for pages, layouts, head, and more.
  ::
  ::card
  ---
  title: Composables
  icon: i-heroicons-arrows-right-left
  to: https://nuxt.com/docs/api/composables/use-app-config
  target: _blank
  ---
  Discover Nuxt composable functions for data-fetching, head management and more.
  ::
  ::card
  ---
  title: Utils
  icon: i-heroicons-scissors
  to: https://nuxt.com/docs/api/utils/dollarfetch
  target: _blank
  ---
  Learn about Nuxt utility functions for navigation, error handling and more.
  ::
  ::card
  ---
  title: Commands
  icon: i-heroicons-command-line
  to: https://nuxt.com/docs/api/commands/add
  target: _blank
  ---
  List of Nuxt CLI commands to init, analyze, build, and preview your application.
  ::
::

:icon{name="lucide:box"}
:icon{name="logos:javascript"}
:icon{name="logos:vue"}
:icon{name="logos:nuxt-icon" size="30"}

::steps
  ### Get Starter Template

  ::code-group
    ```bash [npm]
    npx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
    ```
    ```bash [pnpm]
    pnpm dlx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
    ```
    ```bash [bun]
    bunx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
    ```
  ::

  ::alert
  Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/Abhishek-Mallick/universal-box-starter).
  ::

  ### Install Dependencies

  ::code-group
    ```bash [npm]
    npm install
    ```
    ```bash [pnpm]
    pnpm install
    ```
    ```bash [bun]
    bun install
    ```
  ::

  ### Development Server

  ::code-group
    ```bash [npm]
    npm run dev -- -o
    ```
    ```bash [pnpm]
    pnpm dev -o
    ```
    ```bash [bun]
    bun run dev -o
    ```
  ::
::

::steps{level=5}
  ##### Multi-level headings

  ```mdc
  ::steps{level=5}
  ```

  ##### Available Headings

  `h1` through `h6`. Defaults to `h3`.
::

::field{name="Field" type="string" defaultValue="undefined" required}
The _description_ can be set as prop or in the default slot with full **markdown** support.
::

::field-group
  ::field{name="withDefault" type="boolean" defaultValue="true"}
  A field with a default value.
  ::
  ::field{name="requiredField" type="boolean" required}
  A required field.
  ::
  ::field{name="clear (path?: string)" type="void"}
  Clears form errors associated with a specific path. If no path is provided, clears all form errors.
  ::
  ::field{name="getErrors (path?: string)" type="FormError[]"}
  Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
  ::
  ::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
  Sets form errors for a given path. If no path is provided, overrides all errors.
  ::
  ::field{name="errors" type="Ref<FormError[]>"}
  A reference to the array containing validation errors. Use this to access or manipulate the error information.
  ::
::

::tabs
  ::div{label="PostgreSQL" icon="lucide:database"}
  ### PostgreSQL column types

  ```ts
  import { integer, pgTable } from 'drizzle-orm/pg-core';

  export const table = pgTable('table', {
    int: integer('int')
  });
  ```
  ::
  ::div{label="MySQL"}
  ### MySQL column types

  ```ts
  import { int, mysqlTable } from 'drizzle-orm/mysql-core';

  const table = mysqlTable('table', {
    int: int('int')
  });
  ```
  ::
  ::div{label="SQLite"}
  ### SQLite column types

  ```ts
  import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';

  const table = sqliteTable('table', {
    id: integer('id')
  });

  // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
  integer('id', { mode: 'number' });
  integer('id', { mode: 'boolean' });
  integer('id', { mode: 'timestamp_ms' });
  integer('id', { mode: 'timestamp' }); // Date
  ```
  ::
::
::tabs{variant="card"}
  ::div{label="Card Tab"}
  ### This is a card-style tab
  ::
  ::div{label="Tab 2" icon="lucide:atom"}
  This is Tab #2
  ::
  ```ts [Code Tab]
  console.log('Hello World!');
  ```
::

::hero
---
announcement:
  title: 'Release v1.0.0'
  icon: 'noto:party-popper'
  to: /getting-started
actions:
  - name: Get Started
    to: /getting-started
  - name: GitHub
    variant: outline
    to: https://github.com/Abhishek-Mallick/universal-box
    leftIcon: 'lucide:github'
---

#title
Effortless and Beautiful :br Docs Template.

#description
Beautifully designed Nuxt Content template with shadcn-vue. :br Customizable. Compatible. Open Source.
::

::hero-alt
---
announcement:
  title: 'Introducing Charts'
  icon: 'lucide:pie-chart'
  to: /getting-started
actions:
  - name: Get Started
    to: /getting-started
  - name: GitHub
    variant: outline
    to: https://github.com/Abhishek-Mallick/universal-box
    leftIcon: 'lucide:github'
---

#title
Build your component library

#description
Beautifully designed components that you can copy and paste into your apps.
::

::accordion{default-value="first-item" collapsible}
  ::accordion-item{value="first-item"}
  #title
  Is it accessible?

  #content
  Yes. It adheres to the WAI-ARIA design pattern.
  ::
  ::accordion-item
  #title
  Is it unstyled?

  #content
  Yes. It's unstyled by default, giving you freedom over the look and feel.
  ::
  :accordion-item{title="Can it be animated?" content="Yes! You can use the transition prop to configure the animation."}
::