Composer

vinkas-ui/composer

FreeBlock

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

Live preview

live · rendered by the registry

Rendered by vinkas-ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://ui.vinkas.com/r/composer.json

Source

registry/components/blocks/composer.tsxui.vinkas.com/r/composer.json

1"use client"
2 
3import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupTextarea } from "@/components/ui/input-group"
4import { cn } from "@/lib/utils"
5import { useState } from "react"
6import MarkdownText from "../ui/markdown-text"
7 
8type ComposerProps = {
9  text?: string
10} & React.ComponentProps<"div">
11 
12export default function Composer({ text, className, ...props }: ComposerProps) {
13  const [markdown, setMarkdown] = useState(text || "")
14  return (
15    <div className={cn("grid grid-cols-2 gap-4 w-full", className)} {...props}>
16      <InputGroup>
17        <InputGroupTextarea
18          placeholder="Write your text here. (Markdown supported)"
19          className="min-h-[200px] h-full"
20          value={markdown}
21          onChange={(e) => setMarkdown(e.target.value)}
22        />
23      </InputGroup>
24      <MarkdownText text={markdown} />
25    </div>
26  )
27}

What it pulls in

Other registry items

@vinkas-ui/markdown-text

Files it writes

registry/components/blocks/composer.tsx

More from vinkas-ui

All 7 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs	Command
Countdown Timercountdown-timer	vinkas-ui	Blocks	Free	1 dep