Textarea

import { Textarea } from "@/registry/components/textarea/react/textarea";

export function TextareaDemo() {
    return <Textarea placeholder="Type your message here." />;
}

You can add the textarea component in two ways:

1. During project initialization:

pnpm dlx make-sugarcube@latest init

npx make-sugarcube@latest init

yarn make-sugarcube@latest init

bunx --bun make-sugarcube@latest init

Then select the textarea component when prompted.

2. After initialization:

pnpm dlx make-sugarcube@latest components textarea --framework react

npx make-sugarcube@latest components textarea --framework react

yarn make-sugarcube@latest components textarea --framework react

bunx --bun make-sugarcube@latest components textarea --framework react

When you add the textarea component, you get:

• textarea.tsx - The React component implementation
• @clsx - The clsx utility for conditional classes

import type * as React from "react";

import cn from "clsx";

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
    return <textarea className={cn("textarea", className)} {...props} />;
}

export { Textarea };

:::note The following examples show how to use data attributes for variants. This is just one possible approach. See the principles section for more information on how to approach component variants. :::