next 13 with shadcn ui textarea example

In this tutorial, we will create textarea in next js 13 with shadcn ui. First you need to setup next js 13 with shadcn ui project.

how to use shadcn ui in next js 13

Before use textarea in next js 13 with shadcn ui you need to install npx shadcn-ui add textarea.

npx shadcn-ui@latest add textarea

npx shadcn-ui@latest add

Next 13 with Shadcn UI Textarea Example

1. Create next js 13 with shadcn ui simple textarea using shadcn-ui Textarea component.

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

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

shadcn ui textarea

2. next js 13 with shadcn ui textarea disabled.

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

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

3. next js 13 with shadcn ui textarea with label.

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

export default function TextareaWithLabel() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message">Your message</Label>
      <Textarea placeholder="Type your message here." id="message" />
    </div>
  )
}

shadcn ui textarea with label

4. next js 13 with shadcn ui textarea with label and text.

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

export default function TextareaWithText() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message-2">Your Message</Label>
      <Textarea placeholder="Type your message here." id="message-2" />
      <p className="text-sm text-muted-foreground">
        Your message will be copied to the support team.
      </p>
    </div>
  )
}

shadcn ui textarea with label and text

5. next js 13 with shadcn ui textarea with button.

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

export default function TextareaWithButton() {
  return (
    <div className="grid w-full gap-2">
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </div>
  )
}