# antuikit / Folder

> Folder, a file tree beside a preview of the selected file, with the chevron, folder, file and copy glyphs drawn from the icon pack.

Docs: https://antuikit.com/docs/components/folder

## Install

npx antuikit@latest init
npx antuikit@latest add folder

## Import

import { Folder } from "@/components/ui/folder";

## Demos

- [Basic](https://ui.antuikit.com/embed/folder/basic.md): Pass `treeData` with a `content` string on each file, and `defaultSelectedFile` to open one in the preview with its syntax highlighted.
- [Tree title](https://ui.antuikit.com/embed/folder/directory-title.md): Set `directoryTitle` to put a heading above the tree, like the name of the project the files belong to.
- [Context menu](https://ui.antuikit.com/embed/folder/context-menu.md): Pass `contextMenu` items to open a menu on right-click, and set `contextMenu` to `false` on a node to turn it off there.
- [Custom icons](https://ui.antuikit.com/embed/folder/custom-icons.md): Pass `directoryIcons` keyed by `directory` or a file extension to draw your own glyph for folders and each file type.
- [Controlled file](https://ui.antuikit.com/embed/folder/selected-file.md): Pass `selectedFile` with `onSelectedFileChange` to open a file from outside the tree, or pass an empty path to close it.
- [Controlled folders](https://ui.antuikit.com/embed/folder/expanded-paths.md): Pass `expandedPaths` with `onExpandedPathsChange` to open and close folders from outside, like expand all and collapse all buttons.
- [Load file contents](https://ui.antuikit.com/embed/folder/content-service.md): Pass `fileContentService` to load a file's contents when it is opened, instead of putting `content` on every node.
- [Custom preview](https://ui.antuikit.com/embed/folder/preview-render.md): Pass `previewRender` a function of the open file to wrap or replace the preview, keeping the default one through `originNode`.
- [Searchable tree](https://ui.antuikit.com/embed/folder/search.md): A file browser with a search field above it that filters `treeData` down to the matching files and their folders.
- [Code review](https://ui.antuikit.com/embed/folder/code-review.md): A pull request review with the changed files in a tree and an assistant comment offering a fix below them.
- [Help center](https://ui.antuikit.com/embed/folder/help-center.md): A help center where folders are topics and each article opens as a page with buttons to rate it.
- [Generated project](https://ui.antuikit.com/embed/folder/project-scaffold.md): An assistant reply that sets up a starter project, shows its files in a tree and offers it as a download.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/folder`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Folder` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.