Are the ai2 Outline 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.

Outline textareas

Five border-forward multi-line fields that keep a plain surface and vary only the stroke: an offset ring, a dashed rule, a double rule, a thick rule and corner brackets. Each is sized, token-driven and wraps a real textarea.

TextareaOutline

Installation

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

Run the following command

npx shadcn@latest add @ai2/textarea-outline

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

Copy the source

components/ui/textarea-outline.tsx

"use client"

import type * as React from "react"

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

/* Outline textarea family: 5 multi-line fields where the border is the main visual.
   The difference is only the frame technique: an offset ring, a dashed line, a
   double line, a thick line and corner brackets. The surface stays plain in every
   variant. The effects are pure CSS (focus-within + token transitions), so
   motion/react is not needed. Color comes ONLY from tokens; transparency via a
   Tailwind alpha utility or color-mix. Each one wraps a real <textarea> and passes
   through all the native props. Size = min-height. */

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 fieldBase =
  "w-full resize-y bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"

const wrapBase =
  "relative flex w-72 max-w-full flex-col px-3 py-2 transition-colors focus-within:ring-[3px] focus-within:ring-ring/50"

type Props = React.ComponentProps<"textarea"> & { size?: StyledSize }

/* Ring: ince kenarlik + govdeden ayrilan offset halka (ring-offset). */
export function RingTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-textarea"
      className={cn(
        wrapBase,
        "rounded-lg border border-border ring-1 ring-border/50 ring-offset-2 ring-offset-background focus-within:border-ring focus-within:ring-ring",
        height[size],
        className
      )}
    >
      <textarea aria-label="Message" {...props} className={cn(fieldBase, "flex-1", height[size])} />
    </span>
  )
}

/* Dashed: a dashed border that turns primary on focus. */
export function DashedTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-textarea"
      className={cn(
        wrapBase,
        "rounded-lg border-2 border-dashed border-border focus-within:border-primary",
        height[size],
        className
      )}
    >
      <textarea aria-label="Message" {...props} className={cn(fieldBase, "flex-1", height[size])} />
    </span>
  )
}

/* Double: cift cizgili kalin kenarlik (border-double 4px). */
export function DoubleTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-textarea"
      className={cn(
        wrapBase,
        "rounded-lg border-4 border-double border-border focus-within:border-primary",
        height[size],
        className
      )}
    >
      <textarea aria-label="Message" {...props} className={cn(fieldBase, "flex-1", height[size])} />
    </span>
  )
}

/* Thick: a single thick line that rises to foreground contrast on focus. */
export function ThickTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-textarea"
      className={cn(
        wrapBase,
        "rounded-lg border-2 border-foreground/30 focus-within:border-foreground",
        height[size],
        className
      )}
    >
      <textarea aria-label="Message" {...props} className={cn(fieldBase, "flex-1", height[size])} />
    </span>
  )
}

/* Corner: no border, only 4 corner brackets; turns primary on focus. */
export function CornerTextarea({ className, size = "md", ...props }: Props) {
  const corner =
    "pointer-events-none absolute size-3 border-border transition-colors duration-(--motion-base) motion-reduce:transition-none"
  return (
    <span
      data-slot="styled-textarea"
      className={cn(wrapBase, "group rounded-none", height[size], className)}
    >
      <textarea aria-label="Message" {...props} className={cn(fieldBase, "flex-1", height[size])} />
      <span aria-hidden="true" className={cn(corner, "left-0 top-0 border-l-2 border-t-2 group-focus-within:border-primary")} />
      <span aria-hidden="true" className={cn(corner, "right-0 top-0 border-r-2 border-t-2 group-focus-within:border-primary")} />
      <span aria-hidden="true" className={cn(corner, "bottom-0 left-0 border-b-2 border-l-2 group-focus-within:border-primary")} />
      <span aria-hidden="true" className={cn(corner, "bottom-0 right-0 border-b-2 border-r-2 group-focus-within:border-primary")} />
    </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.

Ring

A thin border with an offset ring around it.

Dashed

A dashed border that turns primary on focus.

Double

A double-stroke border.

Thick

A heavy single stroke that gains contrast on focus.

Corner

No border at all, only four corner brackets.

ai2 Outline textareas: 5 styled variations on the token system

The ai2 Outline textareas are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around border-forward multi-line fields. 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: border color changes 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 fields still focus.

What is in the ai2 Outline textareas?

5 exports in one file: Ring, Dashed, Double, Thick and Corner. 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: border color changes run on token CSS transitions.
Reduced-motion aware: Under prefers-reduced-motion, the transitions are disabled and the fields 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 Outline 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.