Styled file input
Five file inputs: a dropzone, a button, an avatar target, a file list and glass. Each is sized, token-driven, keyboard accessible and supports drag and drop where relevant.
Forms & InputsFile input
Installation
The styled layer is free and installs like any other ai2 component.
Run the following command
npx shadcn@latest add @ai2/file-input-styledDependencies, the @ai2/tokens theme and the component file are installed together.
Install dependencies
npm install motion lucide-reactCopy the source
components/ui/file-input-styled.tsxTS
"use client"
import * as React from "react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"
import { File, Image, Upload, X } from "lucide-react"
import { cn } from "@/lib/utils"
/* Styled file-input family: 5 decorative/opt-in file pickers. Each wraps a hidden
real <input type="file"> and triggers it from a styled surface; the selected
files are held in state (from the input's onChange files) and each one gets a
remove (X) control. The dropzone-based ones open a token "drag active" state
through onDragOver/onDrop (preventDefault). Color comes ONLY from semantic tokens
(transparency via color-mix), size = the surface padding/scale. The animations
use framer-motion and are disabled under reduced-motion. Deterministic (no
Date.now/Math.random). */
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`
}
/* Ortak dosya-state mantigi: secim ekle/degistir/kaldir + disari haber ver. */
function useFiles(multiple: boolean | undefined, onFilesChange?: (files: File[]) => void) {
const [files, setFiles] = React.useState<File[]>([])
const commit = React.useCallback(
(next: File[]) => {
setFiles(next)
onFilesChange?.(next)
},
[onFilesChange]
)
const add = React.useCallback(
(incoming: FileList | File[] | null) => {
if (!incoming) return
const list = Array.from(incoming)
if (list.length === 0) return
if (!multiple) {
commit([list[0]])
return
}
setFiles((prev) => {
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, commit, 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(() => commit([]), [commit])
return { files, add, remove, clear }
}
const dropSurface: Record<StyledSize, string> = {
sm: "gap-2 rounded-lg p-4 text-sm",
md: "gap-3 rounded-xl p-6 text-sm",
lg: "gap-3 rounded-2xl p-8 text-base",
xl: "gap-4 rounded-2xl p-10 text-base",
}
const iconSize: Record<StyledSize, string> = {
sm: "size-5",
md: "size-6",
lg: "size-8",
xl: "size-9",
}
/* 1) DropzoneFile: a large dashed token dropzone with an Upload icon plus a hint, supporting drag and drop. While drag is active it takes border-primary plus a primary tint. */
export function DropzoneFile({ className, size = "md", multiple, accept, onFilesChange }: FileInputProps) {
const reduce = useReducedMotion()
const inputRef = React.useRef<HTMLInputElement>(null)
const [dragActive, setDragActive] = React.useState(false)
const { files, add, remove } = useFiles(multiple, onFilesChange)
return (
<div data-slot="styled-file-input" className={cn("w-full", className)}>
<input
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"
data-drag-active={dragActive || undefined}
onClick={() => inputRef.current?.click()}
onDragOver={(e) => {
e.preventDefault()
setDragActive(true)
}}
onDragLeave={(e) => {
e.preventDefault()
setDragActive(false)
}}
onDrop={(e) => {
e.preventDefault()
setDragActive(false)
add(e.dataTransfer.files)
}}
className={cn(
"flex w-full flex-col items-center justify-center border border-dashed border-border bg-transparent text-center text-muted-foreground outline-none transition-colors duration-(--motion-base) ease-(--motion-ease) hover:border-primary/60 focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[drag-active]:border-primary data-[drag-active]:bg-[color-mix(in_oklab,var(--color-primary)_10%,transparent)] data-[drag-active]:text-foreground motion-reduce:transition-none",
dropSurface[size]
)}
>
<Upload className={cn(iconSize[size], "text-primary")} />
<span className="font-medium text-foreground">Drop files here or click to browse</span>
<span className="text-xs text-muted-foreground">{accept ? accept : "Any file type"}</span>
</button>
<AnimatePresence initial={false}>
{files.length > 0 && (
<motion.ul
data-slot="styled-file-input-list"
className="mt-3 flex flex-col gap-2"
initial={reduce ? undefined : { opacity: 0, height: 0 }}
animate={reduce ? undefined : { opacity: 1, height: "auto" }}
exit={reduce ? undefined : { opacity: 0, height: 0 }}
>
{files.map((file) => (
<li
key={fileKey(file)}
className="flex items-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm"
>
<File className="size-4 shrink-0 text-muted-foreground" />
<span className="min-w-0 flex-1 truncate text-foreground">{file.name}</span>
<span className="shrink-0 text-xs text-muted-foreground">{formatSize(file.size)}</span>
<button
type="button"
aria-label={`Remove ${file.name}`}
onClick={() => remove(fileKey(file))}
className="relative shrink-0 rounded-md text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 after:absolute after:-inset-1.5 motion-reduce:transition-none"
>
<X className="size-4" />
</button>
</li>
))}
</motion.ul>
)}
</AnimatePresence>
</div>
)
}
const buttonSize: Record<StyledSize, string> = {
sm: "h-8 gap-1.5 rounded-md px-3 text-sm",
md: "h-9 gap-2 rounded-lg px-4 text-sm",
lg: "h-10 gap-2 rounded-lg px-5 text-sm",
xl: "h-12 gap-2.5 rounded-xl px-6 text-base",
}
/* 2) ButtonFile: kompakt "Choose file" butonu + yanindaki secili dosya adi. */
export function ButtonFile({ className, size = "md", multiple, accept, onFilesChange }: FileInputProps) {
const inputRef = React.useRef<HTMLInputElement>(null)
const { files, add, remove } = useFiles(multiple, onFilesChange)
return (
<div data-slot="styled-file-input" className={cn("flex items-center gap-3", className)}>
<input
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 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-base) ease-(--motion-ease) hover:bg-surface-3 hover:border-primary/60 focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none",
buttonSize[size]
)}
>
<Upload />
Choose file{multiple ? "s" : ""}
</button>
{files.length > 0 ? (
<div className="flex min-w-0 items-center gap-2 text-sm">
<span className="min-w-0 truncate text-foreground">
{files.length === 1 ? files[0].name : `${files.length} files selected`}
</span>
<button
type="button"
aria-label="Remove selection"
onClick={() => (files.length === 1 ? remove(fileKey(files[0])) : files.forEach((f) => remove(fileKey(f))))}
className="relative shrink-0 rounded-md text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 after:absolute after:-inset-1.5 motion-reduce:transition-none"
>
<X className="size-4" />
</button>
</div>
) : (
<span className="truncate text-sm text-muted-foreground">No file chosen</span>
)}
</div>
)
}
const avatarSize: Record<StyledSize, string> = {
sm: "size-16",
md: "size-20",
lg: "size-24",
xl: "size-28",
}
/* 3) AvatarFile: a circular image-upload target showing a token placeholder, for a single image. It previews the selected image with a remove (X) on top. */
export function AvatarFile({ className, size = "md", accept = "image/*", onFilesChange }: FileInputProps) {
const inputRef = React.useRef<HTMLInputElement>(null)
const [preview, setPreview] = React.useState<string | null>(null)
const { files, add, clear } = useFiles(false, onFilesChange)
React.useEffect(() => {
const current = files[0]
if (!current) {
setPreview(null)
return
}
const url = URL.createObjectURL(current)
setPreview(url)
return () => URL.revokeObjectURL(url)
}, [files])
return (
<div data-slot="styled-file-input" className={cn("relative inline-block", className)}>
<input
ref={inputRef}
type="file"
accept={accept}
className="sr-only"
onChange={(e) => add(e.currentTarget.files)}
/>
<button
type="button"
data-slot="styled-file-input-surface"
aria-label="Upload image"
onClick={() => inputRef.current?.click()}
className={cn(
"group flex items-center justify-center overflow-hidden rounded-full border border-dashed border-border bg-surface-2 text-muted-foreground outline-none transition-colors duration-(--motion-base) ease-(--motion-ease) hover:border-primary hover:text-primary focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none",
avatarSize[size]
)}
>
{preview ? (
// eslint-disable-next-line @next/next/no-img-element
<img src={preview} alt={files[0]?.name ?? "Selected image"} className="size-full object-cover" />
) : (
<Image className={iconSize[size]} />
)}
</button>
{files.length > 0 && (
<button
type="button"
aria-label="Remove image"
onClick={clear}
className="relative absolute -right-1 -top-1 flex size-6 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-sm outline-none transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 after:absolute after:-inset-1.5 motion-reduce:transition-none"
>
<X className="size-3.5" />
</button>
)}
</div>
)
}
/* 4) ListFile: a (multiple) dropzone that lists the selected files as token rows,
each row with a remove (X) control. Drag and drop is supported. */
export function ListFile({ className, size = "md", multiple = true, accept, onFilesChange }: FileInputProps) {
const reduce = useReducedMotion()
const inputRef = React.useRef<HTMLInputElement>(null)
const [dragActive, setDragActive] = React.useState(false)
const { files, add, remove } = useFiles(multiple, onFilesChange)
return (
<div data-slot="styled-file-input" className={cn("w-full", className)}>
<input
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"
data-drag-active={dragActive || undefined}
onClick={() => inputRef.current?.click()}
onDragOver={(e) => {
e.preventDefault()
setDragActive(true)
}}
onDragLeave={(e) => {
e.preventDefault()
setDragActive(false)
}}
onDrop={(e) => {
e.preventDefault()
setDragActive(false)
add(e.dataTransfer.files)
}}
className={cn(
"flex w-full items-center justify-center border border-dashed border-border bg-transparent text-center text-muted-foreground outline-none transition-colors duration-(--motion-base) ease-(--motion-ease) hover:border-primary/60 focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[drag-active]:border-primary data-[drag-active]:bg-[color-mix(in_oklab,var(--color-primary)_10%,transparent)] data-[drag-active]:text-foreground motion-reduce:transition-none",
dropSurface[size]
)}
>
<Upload className={cn("shrink-0", iconSize[size], "text-primary")} />
<span className="font-medium text-foreground">Add files</span>
</button>
<AnimatePresence initial={false}>
{files.length > 0 && (
<motion.ul
data-slot="styled-file-input-list"
className="mt-3 flex flex-col gap-2"
initial={reduce ? undefined : { opacity: 0 }}
animate={reduce ? undefined : { opacity: 1 }}
exit={reduce ? undefined : { opacity: 0 }}
>
<AnimatePresence initial={false}>
{files.map((file) => (
<motion.li
key={fileKey(file)}
layout={!reduce}
initial={reduce ? undefined : { opacity: 0, x: -8 }}
animate={reduce ? undefined : { opacity: 1, x: 0 }}
exit={reduce ? undefined : { opacity: 0, x: 8 }}
className="flex items-center gap-3 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm"
>
<span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-[color-mix(in_oklab,var(--color-primary)_12%,transparent)] text-primary">
<File className="size-4" />
</span>
<span className="flex min-w-0 flex-1 flex-col">
<span className="truncate text-foreground">{file.name}</span>
<span className="text-xs text-muted-foreground">{formatSize(file.size)}</span>
</span>
<button
type="button"
aria-label={`Remove ${file.name}`}
onClick={() => remove(fileKey(file))}
className="relative shrink-0 rounded-md text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 after:absolute after:-inset-1.5 motion-reduce:transition-none"
>
<X className="size-4" />
</button>
</motion.li>
))}
</AnimatePresence>
</motion.ul>
)}
</AnimatePresence>
</div>
)
}
/* 5) GlassFile: buzlu cam (frosted) dropzone kart. backdrop-filter desteklenmezse
opak surface'a duser. Surukle birak destekli. */
export function GlassFile({ className, size = "md", multiple, accept, onFilesChange }: FileInputProps) {
const reduce = useReducedMotion()
const inputRef = React.useRef<HTMLInputElement>(null)
const [dragActive, setDragActive] = React.useState(false)
const { files, add, remove } = useFiles(multiple, onFilesChange)
return (
<div data-slot="styled-file-input" className={cn("w-full", className)}>
<input
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"
data-drag-active={dragActive || undefined}
onClick={() => inputRef.current?.click()}
onDragOver={(e) => {
e.preventDefault()
setDragActive(true)
}}
onDragLeave={(e) => {
e.preventDefault()
setDragActive(false)
}}
onDrop={(e) => {
e.preventDefault()
setDragActive(false)
add(e.dataTransfer.files)
}}
className={cn(
"relative flex w-full flex-col items-center justify-center overflow-hidden border border-border bg-surface-2/70 text-center text-muted-foreground shadow-[inset_0_1px_0_color-mix(in_oklab,var(--color-foreground)_12%,transparent)] outline-none transition-colors duration-(--motion-base) ease-(--motion-ease) before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-1/2 before:rounded-[inherit] before:bg-[linear-gradient(to_bottom,color-mix(in_oklab,var(--color-foreground)_8%,transparent),transparent)] hover:border-primary/60 focus-visible:ring-[3px] focus-visible:ring-ring/50 supports-[backdrop-filter]:bg-surface-2/40 supports-[backdrop-filter]:backdrop-blur-xl data-[drag-active]:border-primary data-[drag-active]:bg-[color-mix(in_oklab,var(--color-primary)_12%,transparent)] data-[drag-active]:text-foreground motion-reduce:transition-none",
dropSurface[size]
)}
>
<Upload className={cn(iconSize[size], "text-primary")} />
<span className="font-medium text-foreground">Drop files onto the glass</span>
<span className="text-xs text-muted-foreground">{accept ? accept : "Any file type"}</span>
</button>
<AnimatePresence initial={false}>
{files.length > 0 && (
<motion.ul
data-slot="styled-file-input-list"
className="mt-3 flex flex-col gap-2"
initial={reduce ? undefined : { opacity: 0, height: 0 }}
animate={reduce ? undefined : { opacity: 1, height: "auto" }}
exit={reduce ? undefined : { opacity: 0, height: 0 }}
>
{files.map((file) => (
<li
key={fileKey(file)}
className="flex items-center gap-2 rounded-lg border border-border bg-surface-2/70 px-3 py-2 text-sm supports-[backdrop-filter]:bg-surface-2/40 supports-[backdrop-filter]:backdrop-blur-md"
>
<File className="size-4 shrink-0 text-muted-foreground" />
<span className="min-w-0 flex-1 truncate text-foreground">{file.name}</span>
<span className="shrink-0 text-xs text-muted-foreground">{formatSize(file.size)}</span>
<button
type="button"
aria-label={`Remove ${file.name}`}
onClick={() => remove(fileKey(file))}
className="relative shrink-0 rounded-md text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 after:absolute after:-inset-1.5 motion-reduce:transition-none"
>
<X className="size-4" />
</button>
</li>
))}
</motion.ul>
)}
</AnimatePresence>
</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.
Dropzone
A large dashed token dropzone with drag and drop.
TS
import { DropzoneFile } from "@/components/ui/file-input-styled"
<DropzoneFile />sm
md
lg
xl
Button
A compact choose-file button with the filename.
No file chosen
TS
import { ButtonFile } from "@/components/ui/file-input-styled"
<ButtonFile />No file chosen
smNo file chosen
mdNo file chosen
lgNo file chosen
xlAvatar
A circular image-upload target.
TS
import { AvatarFile } from "@/components/ui/file-input-styled"
<AvatarFile />sm
md
lg
xl
List
A dropzone that lists selected files with a remove control.
TS
import { ListFile } from "@/components/ui/file-input-styled"
<ListFile />sm
md
lg
xl
Glass
A frosted glass dropzone card.
TS
import { GlassFile } from "@/components/ui/file-input-styled"
<GlassFile />sm
md
lg
xl
ai2 Styled file input: 5 styled variations on the token system
The ai2 Styled file input are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around file pickers and dropzones. 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: the drag-active state runs on token CSS transitions. 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 Styled file input?
5 exports in one file: Dropzone, Button, Avatar, List and Glass. 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: the drag-active state runs on token CSS transitions.
- 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 Styled file input 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.