ProseCallout
Highlight important information with eye-catching colored boxes and icons.
Usage
Use markdown in the default slot of the callout component to add eye-catching context to your content.
This is a `callout` with full **markdown** support.
::callout
This is a `callout` with full **markdown** support.
::Icon
Use the icon prop to display an icon next to the content.
This is a `callout` with an icon.
::callout{icon="i-lucide-square-play"}
This is a `callout` with an icon.
::Color
Use the color prop to change the color of the callout.
This is a `callout` with a custom color.
::callout{icon="i-lucide-info" color="info"}
This is a `callout` with a custom color.
::Link
You can pass any property from the <NuxtLink> component such as to and target to make the callout a link.
::callout{icon="i-lucide-square-play" to="/pohon/getting-started/installation/nuxt" color="neutral"}
Learn how to install `pohon-ui` in your project.
::Shortcuts
You can also use the note, tip, warning and caution shortcuts with pre-defined icons and colors.
Here's some additional information for you.
Here's a helpful suggestion.
Be careful with this action as it might have unexpected results.
This action cannot be undone.
::note
Here's some additional information.
::
::tip
Here's a helpful suggestion.
::
::warning
Be careful with this action as it might have unexpected results.
::
::caution
This action cannot be undone.
::
API
Props
| Prop | Default | Type |
|---|---|---|
to | string | et | X | |
target | null | "_blank" | "_parent" | "_self" | "_top" | string | |
icon | any | |
color | 'neutral' | "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" |
ui | { base?: SlotClass; icon?: SlotClass; externalIcon?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
default | {} |
Theme
app.config.ts
export default defineAppConfig({
ui: {
prose: {
callout: {
slots: {
base: [
'group relative block px-4 py-3 rounded-md text-sm/6 my-5 last:mb-0 [&_code]:text-xs/5 [&_code]:bg-background [&_pre]:bg-background [&>div]:my-2.5 [&_ul]:my-2.5 [&_ol]:my-2.5 *:last:mb-0! [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:my-0',
'transition-colors'
],
icon: [
'size-4 shrink-0 align-sub me-2 inline-block',
'transition-colors'
],
externalIcon: [
'size-4 align-top absolute right-2 top-2 pointer-events-none',
'transition-colors'
]
},
variants: {
color: {
primary: {
base: 'border border-primary/25 bg-primary/10 color-primary-600 dark:color-primary-300 [&_a]:color-primary [&_a:hover]:border-primary [&_a:focus-visible]:border-transparent [&_a]:outline-primary/25 [&_a:focus-visible]:outline-3 [&_a:focus-visible:has(>code)]:outline-0 [&_code]:color-primary-600 dark:[&_code]:color-primary-300 [&_code]:border-primary/25 [&_a>code]:outline-primary/25 [&_a:hover>code]:border-primary [&_a:hover>code]:color-primary [&_a:focus-visible>code]:border-primary [&_a:focus-visible>code]:color-primary [&>ul]:marker:color-primary/50',
icon: 'color-primary',
externalIcon: 'color-primary-600 dark:color-primary-300'
},
secondary: {
base: 'border border-secondary/25 bg-secondary/10 color-secondary-600 dark:color-secondary-300 [&_a]:color-secondary [&_a:hover]:border-secondary [&_a:focus-visible]:border-transparent [&_a]:outline-secondary/25 [&_a:focus-visible]:outline-3 [&_a:focus-visible:has(>code)]:outline-0 [&_code]:color-secondary-600 dark:[&_code]:color-secondary-300 [&_code]:border-secondary/25 [&_a>code]:outline-secondary/25 [&_a:hover>code]:border-secondary [&_a:hover>code]:color-secondary [&_a:focus-visible>code]:border-secondary [&_a:focus-visible>code]:color-secondary [&>ul]:marker:color-secondary/50',
icon: 'color-secondary',
externalIcon: 'color-secondary-600 dark:color-secondary-300'
},
success: {
base: 'border border-success/25 bg-success/10 color-success-600 dark:color-success-300 [&_a]:color-success [&_a:hover]:border-success [&_a:focus-visible]:border-transparent [&_a]:outline-success/25 [&_a:focus-visible]:outline-3 [&_a:focus-visible:has(>code)]:outline-0 [&_code]:color-success-600 dark:[&_code]:color-success-300 [&_code]:border-success/25 [&_a>code]:outline-success/25 [&_a:hover>code]:border-success [&_a:hover>code]:color-success [&_a:focus-visible>code]:border-success [&_a:focus-visible>code]:color-success [&>ul]:marker:color-success/50',
icon: 'color-success',
externalIcon: 'color-success-600 dark:color-success-300'
},
info: {
base: 'border border-info/25 bg-info/10 color-info-600 dark:color-info-300 [&_a]:color-info [&_a:hover]:border-info [&_a:focus-visible]:border-transparent [&_a]:outline-info/25 [&_a:focus-visible]:outline-3 [&_a:focus-visible:has(>code)]:outline-0 [&_code]:color-info-600 dark:[&_code]:color-info-300 [&_code]:border-info/25 [&_a>code]:outline-info/25 [&_a:hover>code]:border-info [&_a:hover>code]:color-info [&_a:focus-visible>code]:border-info [&_a:focus-visible>code]:color-info [&>ul]:marker:color-info/50',
icon: 'color-info',
externalIcon: 'color-info-600 dark:color-info-300'
},
warning: {
base: 'border border-warning/25 bg-warning/10 color-warning-600 dark:color-warning-300 [&_a]:color-warning [&_a:hover]:border-warning [&_a:focus-visible]:border-transparent [&_a]:outline-warning/25 [&_a:focus-visible]:outline-3 [&_a:focus-visible:has(>code)]:outline-0 [&_code]:color-warning-600 dark:[&_code]:color-warning-300 [&_code]:border-warning/25 [&_a>code]:outline-warning/25 [&_a:hover>code]:border-warning [&_a:hover>code]:color-warning [&_a:focus-visible>code]:border-warning [&_a:focus-visible>code]:color-warning [&>ul]:marker:color-warning/50',
icon: 'color-warning',
externalIcon: 'color-warning-600 dark:color-warning-300'
},
error: {
base: 'border border-error/25 bg-error/10 color-error-600 dark:color-error-300 [&_a]:color-error [&_a:hover]:border-error [&_a:focus-visible]:border-transparent [&_a]:outline-error/25 [&_a:focus-visible]:outline-3 [&_a:focus-visible:has(>code)]:outline-0 [&_code]:color-error-600 dark:[&_code]:color-error-300 [&_code]:border-error/25 [&_a>code]:outline-error/25 [&_a:hover>code]:border-error [&_a:hover>code]:color-error [&_a:focus-visible>code]:border-error [&_a:focus-visible>code]:color-error [&>ul]:marker:color-error/50',
icon: 'color-error',
externalIcon: 'color-error-600 dark:color-error-300'
},
neutral: {
base: 'border border-border-muted bg-background-muted color-text',
icon: 'color-text-highlighted',
externalIcon: 'color-text-dimmed'
}
},
to: {
true: 'border-dashed'
}
},
compoundVariants: [
{
color: 'primary',
to: true,
class: {
base: 'hover:border-primary outline-primary/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-primary',
externalIcon: 'group-hover:color-primary'
}
},
{
color: 'neutral',
to: true,
class: {
base: 'hover:border-border-inverted outline-border-inverted/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-border-inverted',
externalIcon: 'group-hover:color-text-highlighted'
}
}
],
defaultVariants: {
color: 'neutral'
}
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
callout: {
slots: {
base: [
'group relative block px-4 py-3 rounded-md text-sm/6 my-5 last:mb-0 [&_code]:text-xs/5 [&_code]:bg-background [&_pre]:bg-background [&>div]:my-2.5 [&_ul]:my-2.5 [&_ol]:my-2.5 *:last:mb-0! [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:my-0',
'transition-colors'
],
icon: [
'size-4 shrink-0 align-sub me-2 inline-block',
'transition-colors'
],
externalIcon: [
'size-4 align-top absolute right-2 top-2 pointer-events-none',
'transition-colors'
]
},
variants: {
color: {
primary: {
base: 'border border-primary/25 bg-primary/10 color-primary-600 dark:color-primary-300 [&_a]:color-primary [&_a:hover]:border-primary [&_a:focus-visible]:border-transparent [&_a]:outline-primary/25 [&_a:focus-visible]:outline-3 [&_a:focus-visible:has(>code)]:outline-0 [&_code]:color-primary-600 dark:[&_code]:color-primary-300 [&_code]:border-primary/25 [&_a>code]:outline-primary/25 [&_a:hover>code]:border-primary [&_a:hover>code]:color-primary [&_a:focus-visible>code]:border-primary [&_a:focus-visible>code]:color-primary [&>ul]:marker:color-primary/50',
icon: 'color-primary',
externalIcon: 'color-primary-600 dark:color-primary-300'
},
secondary: {
base: 'border border-secondary/25 bg-secondary/10 color-secondary-600 dark:color-secondary-300 [&_a]:color-secondary [&_a:hover]:border-secondary [&_a:focus-visible]:border-transparent [&_a]:outline-secondary/25 [&_a:focus-visible]:outline-3 [&_a:focus-visible:has(>code)]:outline-0 [&_code]:color-secondary-600 dark:[&_code]:color-secondary-300 [&_code]:border-secondary/25 [&_a>code]:outline-secondary/25 [&_a:hover>code]:border-secondary [&_a:hover>code]:color-secondary [&_a:focus-visible>code]:border-secondary [&_a:focus-visible>code]:color-secondary [&>ul]:marker:color-secondary/50',
icon: 'color-secondary',
externalIcon: 'color-secondary-600 dark:color-secondary-300'
},
success: {
base: 'border border-success/25 bg-success/10 color-success-600 dark:color-success-300 [&_a]:color-success [&_a:hover]:border-success [&_a:focus-visible]:border-transparent [&_a]:outline-success/25 [&_a:focus-visible]:outline-3 [&_a:focus-visible:has(>code)]:outline-0 [&_code]:color-success-600 dark:[&_code]:color-success-300 [&_code]:border-success/25 [&_a>code]:outline-success/25 [&_a:hover>code]:border-success [&_a:hover>code]:color-success [&_a:focus-visible>code]:border-success [&_a:focus-visible>code]:color-success [&>ul]:marker:color-success/50',
icon: 'color-success',
externalIcon: 'color-success-600 dark:color-success-300'
},
info: {
base: 'border border-info/25 bg-info/10 color-info-600 dark:color-info-300 [&_a]:color-info [&_a:hover]:border-info [&_a:focus-visible]:border-transparent [&_a]:outline-info/25 [&_a:focus-visible]:outline-3 [&_a:focus-visible:has(>code)]:outline-0 [&_code]:color-info-600 dark:[&_code]:color-info-300 [&_code]:border-info/25 [&_a>code]:outline-info/25 [&_a:hover>code]:border-info [&_a:hover>code]:color-info [&_a:focus-visible>code]:border-info [&_a:focus-visible>code]:color-info [&>ul]:marker:color-info/50',
icon: 'color-info',
externalIcon: 'color-info-600 dark:color-info-300'
},
warning: {
base: 'border border-warning/25 bg-warning/10 color-warning-600 dark:color-warning-300 [&_a]:color-warning [&_a:hover]:border-warning [&_a:focus-visible]:border-transparent [&_a]:outline-warning/25 [&_a:focus-visible]:outline-3 [&_a:focus-visible:has(>code)]:outline-0 [&_code]:color-warning-600 dark:[&_code]:color-warning-300 [&_code]:border-warning/25 [&_a>code]:outline-warning/25 [&_a:hover>code]:border-warning [&_a:hover>code]:color-warning [&_a:focus-visible>code]:border-warning [&_a:focus-visible>code]:color-warning [&>ul]:marker:color-warning/50',
icon: 'color-warning',
externalIcon: 'color-warning-600 dark:color-warning-300'
},
error: {
base: 'border border-error/25 bg-error/10 color-error-600 dark:color-error-300 [&_a]:color-error [&_a:hover]:border-error [&_a:focus-visible]:border-transparent [&_a]:outline-error/25 [&_a:focus-visible]:outline-3 [&_a:focus-visible:has(>code)]:outline-0 [&_code]:color-error-600 dark:[&_code]:color-error-300 [&_code]:border-error/25 [&_a>code]:outline-error/25 [&_a:hover>code]:border-error [&_a:hover>code]:color-error [&_a:focus-visible>code]:border-error [&_a:focus-visible>code]:color-error [&>ul]:marker:color-error/50',
icon: 'color-error',
externalIcon: 'color-error-600 dark:color-error-300'
},
neutral: {
base: 'border border-border-muted bg-background-muted color-text',
icon: 'color-text-highlighted',
externalIcon: 'color-text-dimmed'
}
},
to: {
true: 'border-dashed'
}
},
compoundVariants: [
{
color: 'primary',
to: true,
class: {
base: 'hover:border-primary outline-primary/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-primary',
externalIcon: 'group-hover:color-primary'
}
},
{
color: 'neutral',
to: true,
class: {
base: 'hover:border-border-inverted outline-border-inverted/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-border-inverted',
externalIcon: 'group-hover:color-text-highlighted'
}
}
],
defaultVariants: {
color: 'neutral'
}
}
}
}
})
]
})Changelog
No recent changes