Product Input

Simple reusable input component built using sancomp UI tokens.

Default

Baseline input for general forms.

Installation

Install the UI package with your preferred package manager.

terminal

pnpm dlx shadcn@latest add https://sancomp.componentry.fun/r/product-input.json

Usage

Start with the import, then use the basic component pattern.

import.tsx

import { ProductInput } from "@workspace/ui/components/product-input"

usage.tsx

import { ProductInput } from "@workspace/ui/components/product-input"

export function ProductForm() {
  return (
    <div className="w-full max-w-sm space-y-2">
      <label className="text-sm font-medium text-foreground" htmlFor="product-name">
        Product name
      </label>
      <ProductInput id="product-name" placeholder="Type product name" />
    </div>
  )
}

Compact

Smaller vertical rhythm for dense UIs.

Large

Larger target for hero/search areas.

Search

Search input with browser search UI resets.

ProductInput is a lightweight input component for forms and search fields.

Use the interactive sections above for preview, installation, and usage examples.

Usage

Follow the installation and usage blocks above:

Install the package with your package manager.
Copy the import statement.
Start from the basic usage snippet and adapt for your form.

Variants

size="sm" for compact forms.
size="default" as the standard size.
size="lg" for larger layouts.
nativeInput to render plain <input> while keeping sancomp styling.
unstyled to disable the outer shell styles.