Composer

A real-time Markdown editor that renders your content as you type. Perfect for writing documentation, articles, or notes.

Demo

A bold text and italic text

  import Composer from "@/components/blocks/composer"

  export function ComposerDemo() {
    return <Composer text="A **bold text** and _italic text_" />
  }

Installation

npx shadcn@latest add @vinkas-ui/composer

Make sure you already have the @vinkas-ui registry added to your components.json file. Read the installation guide for more information. Also, you should have installed the Typeset from shadcn/ui.

Properties

Property	Type	Required	Description	Default
text	string	Yes	The markdown text.	-
className	string	No	The className to be applied to the component.	-

Demo

Installation

Properties

On this page