Getting Started

Components

Input

A Memphis-style input component with conditional shadow support and dotted border states on focus.

Examples

Basic Usage

Focus to see dotted border effect

Focus: dotted border + shadow moves

Variants

Sizes

Shadow Colors

Form Example

Installation

shadcn CLI (Recommended)

Install the Input component using the shadcn CLI:

Terminal
npx shadcn@latest add https://memphi.dev/r/input.json

Manual Installation

Copy and paste the component code into your project:

Prerequisites: Make sure you have completed the installation setup before adding components.

Usage

Import the component
import { Input } from "@/components/memphi/input"

export default function Example() {
  return (
    <div className="space-y-4">
      <Input placeholder="Basic input" />
      <Input 
        shadowColor="oklch(0.7 0.2 27.3)" 
        placeholder="Input with shadow" 
      />
    </div>
  )
}

API Reference

PropTypeDefaultDescription
variant"default" | "destructive" | "success" | "warning""default"The visual style variant
size"sm" | "default" | "lg""default"The size of the input
shadowColorstringundefinedColor for the shadow. If provided, shadow is applied
classNamestring-Additional CSS classes

Note: The Input component extends all standard HTML input attributes except size (which conflicts with our variant size).

How It Works

✨ Shadow Behavior

  • If shadowColor is provided → Shadow is applied
  • If no shadowColor → No shadow, only border transitions
  • Shadow uses CSS box-shadow with the specified color

🎯 Focus States

  • Without Shadow: Border becomes dotted on focus
  • With Shadow: Border becomes dotted + input translates closer to shadow
  • Smooth 200ms transitions for all state changes

🎨 Design Philosophy

  • Memphis design principles with bold borders and vibrant colors
  • NeoBrutalism aesthetics with high contrast and geometric shapes
  • Conditional shadow system for flexible design options
  • Accessible focus states with clear visual feedback

Manual Installation

1. Copy the component code

components/memphi/input.tsx
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const inputVariants = cva(
  [
    // Base styles
    "flex h-10 w-full rounded-md border-2 border-black bg-white px-3 py-2",
    "text-sm text-black placeholder:text-gray-500",
    "transition-all duration-200 ease-in-out",
    "disabled:cursor-not-allowed disabled:opacity-50",
    "file:border-0 file:bg-transparent file:text-sm file:font-medium",
    // Focus styles with dotted border
    "focus:outline-none focus:border-dashed focus:border-2",
    // Invalid styles
// ... (click expand to see more)

2. Update your import paths

Make sure you have the required dependencies installed and the utility function available:

Required dependencies
npm install class-variance-authority clsx tailwind-merge