Input · ascii-cn

Project name

"use client";
import { Input } from "@/components/ui/input";

export function Demo() {
  return (
    <label className="grid w-full max-w-sm gap-4">
      Project name
      <Input defaultValue="my-project" />
    </label>
  );
}

Installation

pnpm dlx shadcn@latest add https://ascii-cn.kdawg.dev/r/input.json

Usage

import { Input } from "@/components/ui/input"

components/ui/input.tsx

import type { ComponentProps } from "react";
export function Input({ className = "", ...props }: ComponentProps<"input">) {
  return (
    <input
      data-slot="input"
      className={`h-11 w-full min-w-0 rounded-none border border-[#79bdff] bg-black px-3 font-mono text-base text-[#e8e8e5] placeholder:text-[#929da7] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#79bdff] disabled:opacity-50 ${className}`}
      {...props}
    />
  );
}

Styling

Edit the component's Tailwind classes directly. Blue marks interactive controls; yellow highlights attention or a build action. Keep visible text labels alongside color.