Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Code Editor Input Group for Ark UI

A code box named script.js, with refresh above the text and Line 1, Column 1 plus Run below.

A tall textarea framed like a small editor. The header shows a file icon, script.js, and a refresh button. The footer shows Line 1, Column 1 and a Run button. The position does not follow the cursor, and there is no highlighting.

Use it for a short snippet someone can edit and run. If you only need the text, use a Textarea. In React, Ark UI does not track the cursor or highlight the code.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<InputGroup className="w-full max-w-sm bg-background">
  <InputGroupTextarea
    aria-label="Code"
    className="min-h-[200px]"
    placeholder="console.log('Hello, world!');"
  />
  <InputGroupAddon align="block-end" className="border-t">
    <InputGroupText>Line 1, Column 1</InputGroupText>
    <InputGroupButton className="ms-auto" size="sm" variant="default">
      Run
      <CornerDownLeftIcon aria-hidden="true" data-icon="inline-end" />
    </InputGroupButton>
  </InputGroupAddon>
  <InputGroupAddon align="block-start" className="border-b">
    <InputGroupText className="font-medium font-mono">
      <FileCodeIcon aria-hidden="true" />
      script.js
    </InputGroupText>
    <InputGroupButton aria-label="Refresh" className="ms-auto" size="icon-xs">
      <RefreshCwIcon aria-hidden="true" />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

FAQ

How is the header built?

An InputGroupAddon with align="block-start" and border-b: an InputGroupText with a file icon and script.js in font-mono, and an icon-only Refresh button pushed to the end with ms-auto.

Why is the footer before the header in the code?

Order between addons doesn't matter: align places each one. Only the textarea needs to come first.

Does Line 1, Column 1 follow the cursor?

No, it's fixed text. Compute it from the textarea's selection start on select and key events.

Is this a code editor?

It's a textarea: no syntax highlighting or tab indentation. Use it for short snippets, or put an editor library in the same frame.

How is the textarea labeled?

aria-label="Code"; the Refresh button is named by its own aria-label.

API Reference

Input Group

Sets aria-label="Code", placeholder="console.log('Hello, world!');", align="block-end", size="sm", variant="default" and align="block-start". The rest is on the Input Group page.

All 39 input group examples