ReUI Field

Component

About

ReUI Field with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ReUI Field to your project and fits it to your theme.

Code

How ReUI Field is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/reui-field"
import { Input } from "@/components/ui/reui-field-utils/input"
import { Textarea } from "@/components/ui/reui-field-utils/textarea"

export default function Pattern() {
  return (
    <div className="mx-auto w-full max-w-xs">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="ticket-subject">Subject</FieldLabel>
          <Input id="ticket-subject" placeholder="Briefly describe the issue" />
          <FieldDescription>
            Use a clear and descriptive subject line.
          </FieldDescription>
        </Field>
        <Field>
          <div className="flex items-center justify-between">
            <FieldLabel htmlFor="ticket-message">Message</FieldLabel>
            <span className="text-muted-foreground text-xs">0/500</span>
          </div>
          <Textarea
            id="ticket-message"
            placeholder="Tell us more about your problem…"
            className="min-h-[120px]"
          />
          <FieldDescription>
            Include any relevant details to help us resolve your issue.
          </FieldDescription>
        </Field>
      </FieldGroup>
    </div>
  )
}