Logoshadcn-docs-template
DocsDemo
Sections
  • Get Started
Getting Started
  • Introduction
  • Installation
Customization
  • Customizing the Template
  • MDC Components
  • Composables
  • Writing Documentation
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

Previous

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 Heading

Link

Link

[Link](/docs/prose-demo)

Block quote

Block quote

> Block quote

Code

file.js
export default () => {
    console.log('Code block')
}
tabs.vue

<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

A Cool Image

![A Cool Image](https://nuxt.com/assets/design-kit/icon-green.png)

ul

  • Just
  • An
  • Unordered
  • List
- Just
- An
- Unordered
- List

li

  • List element
  • List element
  • List element
  • List element
- List element
- List element
- List element
- List element

ol

  1. Foo
  2. Bar
  3. Baz
1. Foo
2. Bar
3. Baz

strong

Just a strong paragraph.

**Just a strong paragraph.**

em

Just an italic paragraph.

_Just an italic paragraph._

table

KeyTypeDescription
1WonderfulTable
2WonderfulData
3WonderfulWebsite
| Key | Type      | Description |
|-----|-----------|-------------|
| 1   | Wonderful | Table       |
| 2   | Wonderful | Data        |
| 3   | Wonderful | Website     |

tabs

pnpm dlx shadcn-vue@latest add dialog command
OgImage (Custom)

On This Page

H2 HeadingH3 Heading
© shadcn-vue.com