Skip to content
UI Kit
Accent color

Files

File manager screens with list and grid, uploads with a queue, previews with versions, sharing and storage.

6 variants
Switch category

Files

List with folder tree

Sortable table with type, owner, date, size and sharing. Folder tree on wide screens, chips below. Selecting rows brings up a bulk bar.

Thumbnail grid

Drawn previews for photos, PDFs, sheets, slides, design files, video and audio. Filter by type, sort, switch to a list.

Upload queue

Dropzone, total progress and a queue where each file uploads, pauses, fails with a retry or waits its turn.

Preview with details

A document on a calm stage with page strip and zoom. Details, versions and comments beside it, on phones in a sheet.

Share dialog

Invite by email with a role, change or remove access, general access with link role and expiry, copy the link.

Storage overview

Usage by type in one stacked bar, growth over six months, suggestions that free space, largest files and the next plan.

Details

What Files brings along, read from the registry and the source.

Area
App
Variants
6
Version
1.0.2 · since 1.0.0
File
components/ui/files.tsx
Brings along
utilskitbuttoniconsidebar
npm packages
None
Languages
English and German, 137 texts of its own
Studio
Adjust in code
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The FilesProps interface from components/ui/files.tsx, with the comments from the code.

  • variantoptional
    FilesVariant

    listgriduploadpreviewshare-dialogstorage

  • sidebaroptional
    Omit<SidebarProps, 'children'>

    The app frame, see Sidebar. Left out, the screen stands on its own.

  • titlerequired
    string
  • subtitleoptional
    string
  • actionsoptional
    React.ReactNode

    Buttons next to the title

  • todayoptional
    string

    ISO date of today, for "Today, 09:42"

  • breadcrumbsoptional
    { label: string; href?: string }[]
  • foldersoptional
    FolderNode[]

    list: the folder tree

  • activeFolderoptional
    string
  • filesoptional
    FileItem[]
  • selectedoptional
    string[]

    Ids selected at the start

  • uploadsoptional
    UploadItem[]

    upload

  • destinationoptional
    string
  • detailsoptional
    FileDetails

    preview

  • shareoptional
    ShareSettings

    share-dialog

  • storageoptional
    StorageInfo

    storage

  • currencyoptional
    string

Built-in texts

Files writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 137 texts
breadcrumbsEnglish Folder pathGerman Ordnerpfad
searchEnglish Search filesGerman Dateien durchsuchen
foldersEnglish FoldersGerman Ordner
nameEnglish NameGerman Name
ownerEnglish OwnerGerman Besitzer
modifiedEnglish ModifiedGerman Geändert
sizeEnglish SizeGerman Größe
sharingEnglish SharingGerman Freigabe
selectAllEnglish Select all filesGerman Alle Dateien auswählen
selectEnglish Select {name}German {name} auswählen
selectedEnglish {n} selectedGerman {n} ausgewählt
clearEnglish Clear selectionGerman Auswahl aufheben
shareEnglish ShareGerman Teilen
downloadEnglish DownloadGerman Herunterladen
moveEnglish MoveGerman Verschieben
deleteEnglish DeleteGerman Löschen
moreEnglish More actions for {name}German Weitere Aktionen für {name}
onlyYouEnglish Only youGerman Nur du
peopleEnglish {n} peopleGerman {n} Personen
anyoneLinkEnglish Anyone with the linkGerman Alle mit dem Link
itemsEnglish {n} itemsGerman {n} Elemente
todayEnglish TodayGerman Heute
yesterdayEnglish YesterdayGerman Gestern
deletedEnglish {n} files moved to the trashGerman {n} Dateien in den Papierkorb verschoben
undoEnglish UndoGerman Rückgängig
emptyEnglish Nothing matches your search.German Zu deiner Suche passt nichts.
sortByEnglish Sort byGerman Sortieren nach
sortNameEnglish NameGerman Name
sortModifiedEnglish Last modifiedGerman Zuletzt geändert
sortSizeEnglish SizeGerman Größe
viewEnglish ViewGerman Ansicht
gridViewEnglish GridGerman Raster
listViewEnglish ListGerman Liste
typeEnglish TypeGerman Typ
allEnglish AllGerman Alle
imagesEnglish ImagesGerman Bilder
documentsEnglish DocumentsGerman Dokumente
mediaEnglish Video and audioGerman Video und Audio
starredEnglish StarredGerman Markiert
playEnglish PlayGerman Abspielen
dropEnglish Drop files here to uploadGerman Dateien hier ablegen zum Hochladen
dropOrEnglish orGerman oder
chooseEnglish Choose filesGerman Dateien auswählen
chooseHintEnglish Files and folders up to 5 GB eachGerman Dateien und Ordner bis je 5 GB
chooseTouchEnglish Choose photos or filesGerman Fotos oder Dateien wählen
releaseEnglish Release to add them to the queueGerman Loslassen, um sie einzureihen
queueEnglish Upload queueGerman Warteschlange
uploadedOfEnglish {done} of {total} uploadedGerman {done} von {total} hochgeladen
leftTimeEnglish about {min} min leftGerman noch etwa {min} Min.
pauseAllEnglish Pause allGerman Alle anhalten
resumeAllEnglish Resume allGerman Alle fortsetzen
uploadingEnglish {pct} · {speed}/sGerman {pct} · {speed}/s
doneEnglish UploadedGerman Hochgeladen
failedEnglish FailedGerman Fehlgeschlagen
pausedEnglish Paused at {pct}German Angehalten bei {pct}
queuedEnglish WaitingGerman Wartet
retryEnglish Try againGerman Wiederholen
resumeEnglish ResumeGerman Fortsetzen
pauseEnglish PauseGerman Anhalten
removeEnglish Remove from queueGerman Aus der Warteschlange nehmen
destinationEnglish Upload toGerman Hochladen nach
changeEnglish Change folderGerman Ordner ändern
optionsEnglish Upload optionsGerman Optionen beim Hochladen
notifyEnglish Tell the people in this folderGerman Personen im Ordner benachrichtigen
versionsEnglish Keep older versionsGerman Ältere Versionen behalten
compressEnglish Shrink large photosGerman Große Fotos verkleinern
addedEnglish {n} files added to the queueGerman {n} Dateien eingereiht
backEnglish BackGerman Zurück
zoomInEnglish Zoom inGerman Vergrößern
zoomOutEnglish Zoom outGerman Verkleinern
pageEnglish Page {n} of {total}German Seite {n} von {total}
pagesEnglish PagesGerman Seiten
goPageEnglish Go to page {n}German Zu Seite {n}
detailsEnglish DetailsGerman Details
historyEnglish VersionsGerman Versionen
commentsEnglish CommentsGerman Kommentare
panelEnglish File informationGerman Dateiinformationen
showPanelEnglish Show file informationGerman Dateiinformationen zeigen
hidePanelEnglish Hide file informationGerman Dateiinformationen ausblenden
kindEnglish TypeGerman Typ
dimensionsEnglish FormatGerman Format
createdEnglish CreatedGerman Erstellt
locationEnglish LocationGerman Ort
tagsEnglish TagsGerman Schlagwörter
addTagEnglish Add tagGerman Schlagwort hinzufügen
newTagEnglish New tagGerman Neues Schlagwort
sharedWithEnglish Shared withGerman Geteilt mit
currentEnglish CurrentGerman Aktuell
restoreEnglish RestoreGerman Wiederherstellen
restoredEnglish {label} is the current version againGerman {label} ist wieder die aktuelle Version
commentEnglish Your commentGerman Dein Kommentar
commentPlaceholderEnglish Write a commentGerman Kommentar schreiben
postEnglish Post commentGerman Kommentar senden
youEnglish YouGerman Du
shareTitleEnglish Share {name}German {name} teilen
inviteEnglish Invite peopleGerman Personen einladen
invitePlaceholderEnglish Add an email addressGerman E-Mail-Adresse hinzufügen
inviteRoleEnglish Role for invited peopleGerman Rolle für Eingeladene
inviteBtnEnglish InviteGerman Einladen
invalidEmailEnglish Enter a full email address, like name@company.com.German Gib eine vollständige E-Mail-Adresse ein, etwa name@firma.de.
invitedEnglish {email} can now {role}German {email} darf jetzt {role}
withAccessEnglish People with accessGerman Personen mit Zugriff
roleEnglish Role for {name}German Rolle für {name}
roleOwnerEnglish OwnerGerman Besitzer
roleEditEnglish Can editGerman Darf bearbeiten
roleCommentEnglish Can commentGerman Darf kommentieren
roleViewEnglish Can viewGerman Darf ansehen
removeAccessEnglish Remove accessGerman Zugriff entfernen
generalEnglish General accessGerman Allgemeiner Zugriff
restrictedEnglish Only people addedGerman Nur hinzugefügte Personen
restrictedHintEnglish Only the people above can open the file.German Nur die Personen oben können die Datei öffnen.
orgEnglish Anyone at {org}German Alle bei {org}
orgHintEnglish Everyone in {org} can find and open it.German Alle bei {org} können sie finden und öffnen.
linkEnglish Anyone with the linkGerman Alle mit dem Link
linkHintEnglish No sign-in needed to open it.German Zum Öffnen ist keine Anmeldung nötig.
linkRoleEnglish What the link allowsGerman Was der Link erlaubt
expiryEnglish Link expiresGerman Link läuft ab
neverEnglish NeverGerman Nie
daysEnglish After {n} daysGerman Nach {n} Tagen
expiresOnEnglish Stops working on {date}German Gilt bis {date}
copyEnglish Copy linkGerman Link kopieren
copiedEnglish Link copiedGerman Link kopiert
doneBtnEnglish DoneGerman Fertig
closeEnglish CloseGerman Schließen
shareLinkEnglish Link to the fileGerman Link zur Datei
usedEnglish {used} of {total} usedGerman {used} von {total} belegt
freeEnglish FreeGerman Frei
byTypeEnglish Usage by typeGerman Belegung nach Typ
growthEnglish Last six monthsGerman Letzte sechs Monate
cleanupEnglish Free up spaceGerman Platz schaffen
canFreeEnglish You can free up {size}German Du kannst {size} freigeben
freedEnglish {size} freedGerman {size} freigegeben
largestEnglish Largest filesGerman Größte Dateien
membersEnglish Usage by personGerman Belegung nach Person
planEnglish Your planGerman Dein Tarif
perPeriodEnglish per {period}German pro {period}
fullEnglish At this pace your storage is full in about {n} months.German In diesem Tempo ist dein Speicher in etwa {n} Monaten voll.

Accessibility

Read from the source of the component.

  • Files handles the keys Escape, Enter, Arrow up, Arrow down, Arrow left, Arrow right, Home, End, Delete and Space itself.
  • Built on the native dialog element. The browser keeps focus inside and closes it with Escape.
  • Sets aria-activedescendant, aria-autocomplete, aria-checked, aria-controls, aria-current, aria-describedby, aria-expanded, aria-haspopup, aria-invalid, aria-label, aria-labelledby, aria-level, aria-live, aria-pressed, aria-selected, aria-sort, aria-valuemax, aria-valuemin and aria-valuenow, so screen readers announce purpose and state.
  • Uses the roles combobox, img, label, listbox, option, radio, radiogroup, status, switch, tab, tablist, tabpanel, tree and treeitem.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 12 places in the code switch motion off then.

Frequent questions

How do I install Files?

With aiw add @ai-website/files. The command puts components/ui/files.tsx into your project, the code is yours from then on. It brings along button, icon and sidebar. It needs no further npm packages.

Which variants does Files have?

6 variants, List with folder tree, Thumbnail grid, Upload queue, Preview with details, Share dialog and Storage overview. You pick one with the variant prop, for example variant="grid".

Can I translate the texts of Files?

Yes. Files carries 137 texts of its own in English and German, such as “Folder path”, “Search files” and “Folders”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Files?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Files with aiw_components and install it with aiw_add @ai-website/files. Name the variant in your prompt, for example variant="list", and the assistant writes your content straight into the props.

Similar components

More from App, the same area of the kit.

Often combined with

Sections that usually sit next to Files on a page.

Often searched

Jump to

Copied to the clipboard