PaperTextarea

Long-form input styled like a ruled notepad.

↗ longer thoughts deserve better surfaces.

Preview

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const paperTextareaVariants = cva(
  [

Installation

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperTextarea/paperTextarea.tsx⎘
Step 2.Create the barrel:
components/ui/paperTextarea/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperTextarea'
```

Variants

Default

Lined

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'lined'`	`default`	Textarea background treatment.
`placeholder`	`string`	`undefined`	Optional handwritten-style guidance.
`rows`	`number`	`undefined`	Initial rendered row count.

Examples

Issue notes

Useful for triage comments with full context.

<PaperTextarea placeholder="What happened?" />

Release notes draft

Lined variant helps visual scanning for long text.

<PaperTextarea variant="lined" />