An auto resizing textarea with live character count, validation states and variants for notes, comments and AI prompts. Accessible and fully styled with Tailwind.
"use client";
import * as React from "react";
import { Textarea } from "@/components/ui/text-area";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
const primitivePreviewCardSurfaceFrameClass = cn(
"relative isolate overflow-hidden rounded-2xl",
"border",
);
const primitivePreviewCardSurfaceLightClass = cn(
"border-black/[0.08] bg-[#f4f4f5]",
"[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);
const primitivePreviewCardSurfaceClass = cn(
primitivePreviewCardSurfaceFrameClass,
primitivePreviewCardSurfaceLightClass,
// Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
// PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
"dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);
const wensityCardSurfaceClass = primitivePreviewCardSurfaceClass;
function PreviewPanel({
children,
className,
}: {
children: React.ReactNode;
className?: string;
}) {
return (
<div
className={cn(
wensityCardSurfaceClass,
"w-full max-w-md p-6",
className,
)}
>
{children}
</div>
);
}
export function TextareaPreview() {
return (
<PreviewPanel>
<Textarea
label="Message"
placeholder="Thanks for the report. I checked the workspace and..."
defaultValue="Thanks for the report. I checked the workspace and found the import failed because two rows are missing email addresses."
minRows={4}
maxRows={7}
autoResize
/>
</PreviewPanel>
);
}
export default function Demo() {
return <TextareaPreview />;
}