Components / Documentation
Files
A file tree: what a command creates or what a package contains. Folders open and close.
@fabrials/ui
- layout.tsxedited
- page.tsx
- globals.cssFabrials styles
- button.tsx
- dialog.tsx
- components.json
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { Files, Folder, File } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
Folder name / defaultOpen | string / boolean | Folders start closed unless defaultOpen. |
File name / icon | string / ReactNode | The icon defaults to a plain file. |
note | ReactNode | A short remark on the right: new, generated, a license. |
highlighted | boolean | Marks the file the text is about. |
Behavior
Folders are buttons with aria-expanded; indentation comes from the depth, not from nesting margins.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.