::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/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
A **link** alert.
::
::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/ZTL-UwU/shadcn-docs-nuxt
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: lucide:box
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: lucide:arrow-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: lucide: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: lucide:square-terminal
to: https://nuxt.com/docs/api/commands/add
target: _blank
---
List of Nuxt CLI commands to init, analyze, build, and preview your application.
::
::
The description can be set as prop or in the default slot with full markdown support.
::field{name="Field" type="string" defaultValue="'default'" required}
The _description_ can be set as prop or in the default slot with full **markdown** support.
::
Sets form errors for a given path. If no path is provided, overrides all errors.
errorsRef<FormError[]>
A reference to the array containing validation errors. Use this to access or manipulate the error information.
::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{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!');
```
::
Beautifully designed components that you can copy and paste into your apps.
::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/ZTL-UwU/shadcn-docs-nuxt
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."}
::
The value prop in ::accordion-item is auto-generated by default. You can set them to other unique values and put them in the default-value prop of ::accordion.