Are the ai2 Toolbar textareas free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Toolbar textareas

Five multi-line fields that add chrome around the field: a formatting bar, an action bar, an info footer, a titled header and a split top bar. The toolbar buttons are visual affordances only, so nothing pretends to be a rich-text editor. They are focusable and labelled, ready for you to bind your own behavior.

TextareaToolbar

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/textarea-toolbar

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install lucide-react

Copy the source

components/ui/textarea-toolbar.tsx

"use client"

import * as React from "react"
import { AtSign, Bold, Italic, Link2, ListOrdered, Paperclip, Send, Smile } from "lucide-react"

import { cn } from "@/lib/utils"

/* Toolbar textarea family: 5 multi-line fields that change the shell around the
   field. The difference is only the chrome: a formatting bar on top, actions below,
   an info footer, a titled top bar and a two-part bar.

   NOTE: the bar buttons in this family are a VISUAL AFFORDANCE. This is NOT a rich
   text editor and the buttons do not format the text; to avoid imitating a broken
   editor, no fake behavior is wired up. The buttons are focusable and have
   accessible names, so they are ready to be connected to a real editor. Bind onClick
   to supply your own behavior.

   The effects are pure CSS (focus-within/hover + token transitions), so motion/react
   is not needed. Color comes ONLY from tokens; transparency via color-mix or the
   Tailwind alpha. Every field has an accessible name (the ids are produced with
   React.useId). Each one wraps a real <textarea> and passes through all the native
   props. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const height: Record<StyledSize, string> = {
  sm: "min-h-16 text-sm",
  md: "min-h-20 text-sm",
  lg: "min-h-24 text-base",
  xl: "min-h-28 text-base",
}

const shellBase =
  "flex w-72 max-w-full flex-col overflow-hidden rounded-xl border border-field-border bg-transparent transition-colors focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50"

const areaBase =
  "w-full resize-y bg-transparent px-3 py-2 text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50"

const barBase = "flex items-center gap-0.5 border-border bg-surface-2 px-1.5 py-1"

/* Cubuk butonu: gorsel affordance, davranis tuketiciye ait. */
const barBtn =
  "inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)] hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>i]:text-base [&>i]:leading-none [&>i]:shrink-0"

const sendBtn =
  "inline-flex h-7 shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-md bg-primary px-2.5 text-xs font-medium text-primary-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-primary)_88%,var(--color-foreground))] focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:size-3.5 [&>svg]:shrink-0 [&>i]:text-xs [&>i]:leading-none [&>i]:shrink-0"

type Props = React.ComponentProps<"textarea"> & {
  size?: StyledSize
  /** The top bar heading. NOT `title`: a native textarea's title is a string. */
  heading?: string
}

/* Tracks the entered value whether controlled or uncontrolled (for the counter). */
function useTrackedValue(props: Pick<Props, "value" | "defaultValue" | "onChange">) {
  const [internal, setInternal] = React.useState(
    props.defaultValue != null ? String(props.defaultValue) : ""
  )
  const value = props.value != null ? String(props.value) : internal
  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInternal(e.target.value)
    props.onChange?.(e)
  }
  return { value, onChange }
}

/* Format: ustte bicimlendirme cubugu (kalin, italik, baglanti, liste). */
export function FormatTextarea({ className, size = "md", ...props }: Props) {
  const id = React.useId()
  return (
    <span data-slot="styled-textarea" className={cn(shellBase, className)}>
      <span role="toolbar" aria-label="Formatting" aria-controls={id} className={cn(barBase, "border-b")}>
        <button type="button" aria-label="Bold" className={barBtn}>
          <Bold />
        </button>
        <button type="button" aria-label="Italic" className={barBtn}>
          <Italic />
        </button>
        <button type="button" aria-label="Insert link" className={barBtn}>
          <Link2 />
        </button>
        <button type="button" aria-label="Numbered list" className={barBtn}>
          <ListOrdered />
        </button>
      </span>
      <textarea id={id} aria-label="Message" {...props} className={cn(areaBase, height[size])} />
    </span>
  )
}

/* Actions: altta eylem cubugu; ek ikonlari solda, gonder butonu sagda. */
export function ActionsTextarea({ className, size = "md", ...props }: Props) {
  const id = React.useId()
  return (
    <span data-slot="styled-textarea" className={cn(shellBase, className)}>
      <textarea id={id} aria-label="Message" {...props} className={cn(areaBase, height[size])} />
      <span className={cn(barBase, "border-t justify-between")}>
        <span className="flex items-center gap-0.5">
          <button type="button" aria-label="Attach a file" className={barBtn}>
            <Paperclip />
          </button>
          <button type="button" aria-label="Mention someone" className={barBtn}>
            <AtSign />
          </button>
          <button type="button" aria-label="Add an emoji" className={barBtn}>
            <Smile />
          </button>
        </span>
        <button type="button" className={sendBtn}>
          <Send />
          Send
        </button>
      </span>
    </span>
  )
}

/* Footer: altta bilgi altligi; canli karakter sayaci + ipucu metni. */
export function FooterTextarea({ className, size = "md", maxLength = 280, ...props }: Props) {
  const id = React.useId()
  const { value, onChange } = useTrackedValue(props)
  const count = value.length
  const near = count >= maxLength * 0.9
  return (
    <span data-slot="styled-textarea" className={cn(shellBase, className)}>
      <textarea
        id={id}
        aria-label="Message"
        maxLength={maxLength}
        {...props}
        onChange={onChange}
        className={cn(areaBase, height[size])}
      />
      <span className={cn(barBase, "border-t justify-between px-3 text-xs text-muted-foreground")}>
        <span>Markdown is not rendered here.</span>
        <span className={cn("tabular-nums", near ? "text-warning" : "text-muted-foreground")}>
          {count}/{maxLength}
        </span>
      </span>
    </span>
  )
}

/* Header: ustte baslikli bar; baslik alanin gorunur etiketi olarak baglanir. */
export function HeaderTextarea({ className, size = "md", heading = "Message", ...props }: Props) {
  const id = React.useId()
  const headingId = `${id}-heading`
  return (
    <span data-slot="styled-textarea" className={cn(shellBase, className)}>
      <span className={cn(barBase, "border-b justify-between px-3 py-1.5")}>
        <label id={headingId} htmlFor={id} className="text-xs font-medium text-foreground">
          {heading}
        </label>
        <span className="text-xs text-muted-foreground">Optional</span>
      </span>
      <textarea id={id} {...props} className={cn(areaBase, height[size])} />
    </span>
  )
}

/* Split: ust cubuk iki parcaya bolunur; solda bicim ikonlari, sagda gonder. */
export function SplitTextarea({ className, size = "md", ...props }: Props) {
  const id = React.useId()
  return (
    <span data-slot="styled-textarea" className={cn(shellBase, className)}>
      <span className={cn(barBase, "border-b justify-between")}>
        <span role="toolbar" aria-label="Formatting" aria-controls={id} className="flex items-center gap-0.5">
          <button type="button" aria-label="Bold" className={barBtn}>
            <Bold />
          </button>
          <button type="button" aria-label="Italic" className={barBtn}>
            <Italic />
          </button>
          <span aria-hidden="true" className="mx-1 h-4 w-px bg-border" />
          <button type="button" aria-label="Insert link" className={barBtn}>
            <Link2 />
          </button>
        </span>
        <button type="button" className={sendBtn}>
          Send
        </button>
      </span>
      <textarea id={id} aria-label="Message" {...props} className={cn(areaBase, height[size])} />
    </span>
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Format

A formatting bar above the field.

Actions

An action bar below the field, with a send button.

Footer

An info footer with a live character counter.

Markdown is not rendered here.0/280

Markdown is not rendered here.0/280sm

Markdown is not rendered here.0/280md

Markdown is not rendered here.0/280lg

Markdown is not rendered here.0/280xl

Header

A titled header bar that labels the field.

MessageOptional

MessageOptionalsm

MessageOptionalmd

MessageOptionallg

MessageOptionalxl

Split

A top bar split between format icons and a send button.

ai2 Toolbar textareas: 5 styled variations on the token system

The ai2 Toolbar textareas are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around multi-line fields with chrome around the field. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: hover and focus effects run on token CSS transitions. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the transitions are disabled and the controls still focus.

What is in the ai2 Toolbar textareas?

5 exports in one file: Format, Actions, Footer, Header and Split. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: hover and focus effects run on token CSS transitions.
Reduced-motion aware: Under prefers-reduced-motion, the transitions are disabled and the controls still focus.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Toolbar textareas sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.