Textarea · ascii-cn

What should change?

"use client";
import { Textarea } from "@/components/ui/textarea";

export function Demo() {
  return (
    <label className="grid w-full gap-4">
      What should change?
      <Textarea defaultValue="Tell us a little about your project." />
    </label>
  );
}

Installation

pnpm dlx shadcn@latest add https://ascii-cn.kdawg.dev/r/textarea.json

Usage

import { Textarea } from "@/components/ui/textarea"

components/ui/textarea.tsx

import type { ComponentProps } from "react";
export function Textarea({
  className = "",
  ...props
}: ComponentProps<"textarea">) {
  return (
    <textarea
      className={`min-h-24 w-full rounded-none border border-[#79bdff] bg-black p-3 font-mono text-base text-[#e8e8e5] placeholder:text-[#929da7] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#79bdff] disabled:opacity-50 ${className}`}
      {...props}
    />
  );
}

Styling

Edit the component's Tailwind classes directly. Blue marks interactive controls; yellow highlights attention or a build action. Keep visible text labels alongside color.