Browse components
Decorated Text
Frames a word with corner brackets, a dashed selection box and twinkling sparkles that draw in on view or hover.
Installation
npx shadcn@latest add @glint-ui/decorated-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/decorated-text.json
Usage
import { DecoratedText } from "@/components/ui/decorated-text";
<DecoratedText text="Design with intent" decoration="all" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Design with intent" | Text to decorate. |
| decoration | "all" | "brackets" | "box" | "sparkles" | "all" | Which decorations to draw. |
| trigger | "view" | "hover" | "view" | Draw in when scrolled into view, or only while hovered. |
| color | string | "#a3e635" | Decoration color. |
| duration | number | 900 | Draw-in duration, in ms. |
| className | string | — | Extra classes for the root element. |