Are the ai2 Compact file inputs free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Compact file inputs

Five dense file inputs for places a dropzone does not fit: an inline text trigger, a borderless minimal pair, a width-capped box, a settings row and an icon-only square. Each stays on one line, keeps the clear control on an extended hit area, and is sized, token-driven and keyboard accessible.

File inputCompact

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/file-input-compact

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install lucide-react

Copy the source

components/ui/file-input-compact.tsx

"use client"

import * as React from "react"
import { Paperclip, Plus, Upload, X } from "lucide-react"

import { cn } from "@/lib/utils"

/* Compact file-input family: 5 dense pickers that fit into tight places. They all
   stay on a single line and do not disturb the vertical rhythm; they are meant to
   be used inside form rows, table cells and toolbars. Each export wraps a real
   <input type="file">; the trigger is focusable and works with the keyboard.
   Because the clear button is under 24px it carries an invisible touch-area
   extension (relative after:absolute after:-inset-1.5). Color comes ONLY from
   semantic tokens, with transparency via color-mix. Deterministic, no animation
   (only token transitions), so it is identical under reduced motion. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

type FileInputProps = {
  className?: string
  size?: StyledSize
  multiple?: boolean
  accept?: string
  onFilesChange?: (files: File[]) => void
}

function fileKey(file: File): string {
  return `${file.name}:${file.size}:${file.lastModified}`
}

function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`
  return `${Math.round(bytes / (1024 * 1024))} MB`
}

function useFiles(multiple: boolean | undefined, onFilesChange?: (files: File[]) => void) {
  const [files, setFiles] = React.useState<File[]>([])

  const add = React.useCallback(
    (incoming: FileList | File[] | null) => {
      if (!incoming) return
      const list = Array.from(incoming)
      if (list.length === 0) return
      setFiles((prev) => {
        if (!multiple) {
          const next = [list[0]]
          onFilesChange?.(next)
          return next
        }
        const map = new Map(prev.map((f) => [fileKey(f), f]))
        for (const f of list) map.set(fileKey(f), f)
        const next = Array.from(map.values())
        onFilesChange?.(next)
        return next
      })
    },
    [multiple, onFilesChange]
  )

  const remove = React.useCallback(
    (key: string) => {
      setFiles((prev) => {
        const next = prev.filter((f) => fileKey(f) !== key)
        onFilesChange?.(next)
        return next
      })
    },
    [onFilesChange]
  )

  const clear = React.useCallback(() => {
    setFiles([])
    onFilesChange?.([])
  }, [onFilesChange])

  return { files, add, remove, clear }
}

/* The control height is aligned to the Button scale: sm=h-7, md=h-8, lg=h-9,
   xl=h-10. The Compact family deliberately sits one step shorter. */
const controlSize: Record<StyledSize, string> = {
  sm: "h-7 gap-1.5 rounded-md px-2 text-xs",
  md: "h-8 gap-1.5 rounded-md px-2.5 text-sm",
  lg: "h-9 gap-2 rounded-lg px-3 text-sm",
  xl: "h-10 gap-2 rounded-lg px-3.5 text-sm",
}

const textSize: Record<StyledSize, string> = {
  sm: "text-xs",
  md: "text-sm",
  lg: "text-sm",
  xl: "text-sm",
}

const clearBtn =
  "relative shrink-0 rounded-sm text-muted-foreground outline-none transition-colors duration-(--motion-fast) hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 after:absolute after:-inset-1.5 motion-reduce:transition-none"

const iconCompat = "[&>svg]:size-3.5 [&>svg]:shrink-0 [&>i]:text-sm [&>i]:leading-none"

function label(files: File[], empty: string): string {
  if (files.length === 0) return empty
  if (files.length === 1) return files[0].name
  return `${files.length} files`
}

/* 1) InlineFile: metin akisi icinde duran, alt cizgili baglanti gibi tetikleyici. */
export function InlineFile({ className, size = "md", multiple, accept, onFilesChange }: FileInputProps) {
  const id = React.useId()
  const inputRef = React.useRef<HTMLInputElement>(null)
  const { files, add, clear } = useFiles(multiple, onFilesChange)

  return (
    <span data-slot="styled-file-input" className={cn("inline-flex items-center gap-1.5", className)}>
      <label htmlFor={id} className="sr-only">
        Choose a file
      </label>
      <input
        id={id}
        ref={inputRef}
        type="file"
        multiple={multiple}
        accept={accept}
        className="sr-only"
        onChange={(e) => add(e.currentTarget.files)}
      />
      <button
        type="button"
        data-slot="styled-file-input-surface"
        onClick={() => inputRef.current?.click()}
        className={cn(
          "inline-flex items-center gap-1 rounded-sm font-medium text-primary underline underline-offset-4 outline-none transition-colors duration-(--motion-fast) hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none",
          iconCompat,
          textSize[size]
        )}
      >
        <Paperclip />
        {label(files, "Attach a file")}
      </button>
      {files.length > 0 && (
        <button type="button" aria-label="Remove selection" onClick={clear} className={clearBtn}>
          <X className="size-3.5" />
        </button>
      )}
    </span>
  )
}

/* 2) MinimalFile: borderless, icon plus name only. The quietest variant. */
export function MinimalFile({ className, size = "md", multiple, accept, onFilesChange }: FileInputProps) {
  const id = React.useId()
  const inputRef = React.useRef<HTMLInputElement>(null)
  const { files, add, clear } = useFiles(multiple, onFilesChange)
  const selected = files.length > 0

  return (
    <div data-slot="styled-file-input" className={cn("flex min-w-0 items-center gap-1", className)}>
      <label htmlFor={id} className="sr-only">
        Choose a file
      </label>
      <input
        id={id}
        ref={inputRef}
        type="file"
        multiple={multiple}
        accept={accept}
        className="sr-only"
        onChange={(e) => add(e.currentTarget.files)}
      />
      <button
        type="button"
        data-slot="styled-file-input-surface"
        onClick={() => inputRef.current?.click()}
        className={cn(
          "inline-flex min-w-0 select-none items-center border border-transparent bg-transparent outline-none transition-colors duration-(--motion-fast) hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none",
          iconCompat,
          controlSize[size],
          selected ? "text-foreground" : "text-muted-foreground"
        )}
      >
        <Upload />
        <span className="min-w-0 truncate">{label(files, "Upload")}</span>
      </button>
      {selected && (
        <button type="button" aria-label="Remove selection" onClick={clear} className={clearBtn}>
          <X className="size-3.5" />
        </button>
      )}
    </div>
  )
}

/* 3) NarrowFile: the variant that fits a form row, with the name and the clear control side by side in a narrow box. */
export function NarrowFile({ className, size = "md", multiple, accept, onFilesChange }: FileInputProps) {
  const id = React.useId()
  const inputRef = React.useRef<HTMLInputElement>(null)
  const { files, add, clear } = useFiles(multiple, onFilesChange)
  const selected = files.length > 0

  return (
    <div
      data-slot="styled-file-input"
      className={cn(
        "flex w-full max-w-56 min-w-0 items-center border border-field-border bg-transparent shadow-xs transition-[color,box-shadow] duration-(--motion-fast) has-[button:focus-visible]:border-ring dark:bg-input/30 motion-reduce:transition-none",
        controlSize[size],
        className
      )}
    >
      <label htmlFor={id} className="sr-only">
        Choose a file
      </label>
      <input
        id={id}
        ref={inputRef}
        type="file"
        multiple={multiple}
        accept={accept}
        className="sr-only"
        onChange={(e) => add(e.currentTarget.files)}
      />
      <button
        type="button"
        data-slot="styled-file-input-surface"
        onClick={() => inputRef.current?.click()}
        className={cn(
          "flex min-w-0 flex-1 select-none items-center gap-1.5 rounded-sm text-left outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
          iconCompat,
          selected ? "text-foreground" : "text-muted-foreground"
        )}
      >
        <Paperclip />
        <span className="min-w-0 flex-1 truncate">{label(files, "Choose a file")}</span>
      </button>
      {selected && (
        <button type="button" aria-label="Clear selected file" onClick={clear} className={clearBtn}>
          <X className="size-3.5" />
        </button>
      )}
    </div>
  )
}

/* 4) RowFile: label on the left, trigger on the right. For settings and table rows. */
export function RowFile({ className, size = "md", multiple, accept, onFilesChange }: FileInputProps) {
  const id = React.useId()
  const inputRef = React.useRef<HTMLInputElement>(null)
  const { files, add, remove } = useFiles(multiple, onFilesChange)

  return (
    <div
      data-slot="styled-file-input"
      className={cn(
        "flex w-full items-center justify-between gap-3 border-b border-border py-2",
        className
      )}
    >
      <label htmlFor={id} className={cn("min-w-0 truncate text-muted-foreground", textSize[size])}>
        Attachment
      </label>
      <input
        id={id}
        ref={inputRef}
        type="file"
        multiple={multiple}
        accept={accept}
        className="sr-only"
        onChange={(e) => add(e.currentTarget.files)}
      />
      <div className="flex min-w-0 items-center gap-2">
        {files.length > 0 && (
          <span className={cn("flex min-w-0 items-center gap-1.5", textSize[size])}>
            <span className="min-w-0 truncate text-foreground">{files[0].name}</span>
            <span className="shrink-0 text-xs text-muted-foreground">{formatSize(files[0].size)}</span>
            <button
              type="button"
              aria-label={`Remove ${files[0].name}`}
              onClick={() => remove(fileKey(files[0]))}
              className={clearBtn}
            >
              <X className="size-3.5" />
            </button>
          </span>
        )}
        <button
          type="button"
          data-slot="styled-file-input-surface"
          onClick={() => inputRef.current?.click()}
          className={cn(
            "inline-flex shrink-0 select-none items-center justify-center border border-border bg-surface-2 font-medium whitespace-nowrap text-foreground outline-none transition-colors duration-(--motion-fast) hover:bg-surface-3 focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none",
            iconCompat,
            controlSize[size]
          )}
        >
          <Plus />
          {files.length > 0 ? "Replace" : "Add"}
        </button>
      </div>
    </div>
  )
}

/* 5) BareFile: a square trigger carrying only an icon. The narrowest option for toolbars; when there is a selection a small counter badge appears beside it. */
export function BareFile({ className, size = "md", multiple = true, accept, onFilesChange }: FileInputProps) {
  const id = React.useId()
  const inputRef = React.useRef<HTMLInputElement>(null)
  const { files, add, clear } = useFiles(multiple, onFilesChange)
  const square: Record<StyledSize, string> = {
    sm: "size-7 rounded-md",
    md: "size-8 rounded-md",
    lg: "size-9 rounded-lg",
    xl: "size-10 rounded-lg",
  }

  return (
    <div data-slot="styled-file-input" className={cn("inline-flex items-center gap-1.5", className)}>
      <label htmlFor={id} className="sr-only">
        Attach files
      </label>
      <input
        id={id}
        ref={inputRef}
        type="file"
        multiple={multiple}
        accept={accept}
        className="sr-only"
        onChange={(e) => add(e.currentTarget.files)}
      />
      <button
        type="button"
        data-slot="styled-file-input-surface"
        aria-label="Attach files"
        onClick={() => inputRef.current?.click()}
        className={cn(
          "inline-flex shrink-0 items-center justify-center border border-transparent bg-transparent text-muted-foreground outline-none transition-colors duration-(--motion-fast) hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none",
          iconCompat,
          square[size]
        )}
      >
        <Paperclip />
      </button>
      {files.length > 0 && (
        <>
          <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-[color-mix(in_oklab,var(--color-primary)_14%,transparent)] px-1.5 text-xs font-medium tabular-nums text-primary">
            {files.length}
          </span>
          <button type="button" aria-label="Remove all files" onClick={clear} className={clearBtn}>
            <X className="size-3.5" />
          </button>
        </>
      )}
    </div>
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Inline

An underlined trigger that sits inside a line of text.

Minimal

A borderless icon and filename pair.

Narrow

A width-capped input box for form rows.

Row

A settings row with the label left and the trigger right.

Attachment

Bare

An icon-only square trigger with a count badge.

ai2 Compact file inputs: 5 styled variations on the token system

The ai2 Compact file inputs are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around dense file pickers for form rows, table cells and toolbars. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: only token CSS transitions run on hover and focus. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the transitions are disabled and the picker still works.

What is in the ai2 Compact file inputs?

5 exports in one file: Inline, Minimal, Narrow, Row and Bare. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: only token CSS transitions run on hover and focus.
Reduced-motion aware: Under prefers-reduced-motion, the transitions are disabled and the picker still works.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Compact file inputs sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.