Sections
Getting Started
Components
- DocTabs
- Callout
- ComponentPreview
- CommandMenu
- CopyButton
- DocsSidebar
- DocsTableOfContents
- PageHeader
- SiteHeader
- CopyCodeButton
- DocsCopyPage
- CodeBlockCommand
- CommandMenuItem
- CommandMenuKbd
- GitHubLink
- LucideIcon
- MainNav
- MobileNav
- ModeSwitcher
- PageHeaderDescription
- PageHeaderHeading
- SiteBody
- SiteConfig
- SiteFooter
- OgImage (Custom)
Prose Demo
Prose components are replacements for HTML typography tags. Prose components provide a simple way to customize content UI.
Heading
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
# H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading
##### H5 Heading
###### H6 HeadingLink
[Link](/docs/prose-demo)Block quote
Block quote
> Block quoteCode
export default () => {
console.log('Code block')
}
<script setup lang="ts">
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
</script>
<template>
<Tabs default-value="account">
<TabsList>
<TabsTrigger value="account">
Account
</TabsTrigger>
<TabsTrigger value="password">
Password
</TabsTrigger>
</TabsList>
<TabsContent value="account">
Make changes to your account here.
</TabsContent>
<TabsContent value="password">
Change your password here.
</TabsContent>
</Tabs>
</template> ```vue [tabs.vue] showLineNumbers
<script setup lang="ts">
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
</script>
<template>
<Tabs default-value="account">
<TabsList>
<TabsTrigger value="account">
Account
</TabsTrigger>
<TabsTrigger value="password">
Password
</TabsTrigger>
</TabsList>
<TabsContent value="account">
Make changes to your account here.
</TabsContent>
<TabsContent value="password">
Change your password here.
</TabsContent>
</Tabs>
</template>
```Image
![]()
ul
- Just
- An
- Unordered
- List
- Just
- An
- Unordered
- Listli
- List element
- List element
- List element
- List element
- List element
- List element
- List element
- List elementol
- Foo
- Bar
- Baz
1. Foo
2. Bar
3. Bazstrong
Just a strong paragraph.
**Just a strong paragraph.**em
Just an italic paragraph.
_Just an italic paragraph._table
| Key | Type | Description |
|---|---|---|
| 1 | Wonderful | Table |
| 2 | Wonderful | Data |
| 3 | Wonderful | Website |
| Key | Type | Description |
|-----|-----------|-------------|
| 1 | Wonderful | Table |
| 2 | Wonderful | Data |
| 3 | Wonderful | Website |tabs
pnpm dlx shadcn-vue@latest add dialog command