Vela UI Docs
venizia.ai

Drive

A Drive workspace on the app shell: the 240px Drive panel with its nav and storage meter, the overview stats with halftone meters, folder cards with the halftone texture, and the recent-files table with access pills, dashed row dividers and pagination. The page head's search live-filters the table.

Drive

@velaui/drive
@velaui/driveOpen Open
pnpm dlx velaui add @velaui/drive

Built from

  1. AvatarAn image element with a fallback for representing the user.
  2. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
  3. ButtonDisplays a button or a component that looks like a button.
  4. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  5. SegmentedA set of mutually exclusive options inside a single inline container.
  6. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  7. 30 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import Drive from "@/components/blocks/drive/drive";

export default function Page() {
  return <Drive />;
}

Drive Create

@velaui/drive-create
@velaui/drive-createOpen Open
pnpm dlx velaui add @velaui/drive-create

Built from

  1. AvatarAn image element with a fallback for representing the user.
  2. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
  3. ButtonDisplays a button or a component that looks like a button.
  4. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  5. SegmentedA set of mutually exclusive options inside a single inline container.
  6. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  7. 31 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import DriveCreate from "@/components/blocks/drive-create/drive-create";

export default function Page() {
  return <DriveCreate />;
}

Drive Empty

@velaui/drive-empty
@velaui/drive-emptyOpen Open
pnpm dlx velaui add @velaui/drive-empty

Built from

  1. AvatarAn image element with a fallback for representing the user.
  2. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
  3. ButtonDisplays a button or a component that looks like a button.
  4. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  5. SegmentedA set of mutually exclusive options inside a single inline container.
  6. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  7. 25 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import DriveEmpty from "@/components/blocks/drive-empty/drive-empty";

export default function Page() {
  return <DriveEmpty />;
}

Drive File Menu

@velaui/drive-file-menu
@velaui/drive-file-menuOpen Open
pnpm dlx velaui add @velaui/drive-file-menu

Built from

  1. AvatarAn image element with a fallback for representing the user.
  2. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
  3. ButtonDisplays a button or a component that looks like a button.
  4. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  5. SegmentedA set of mutually exclusive options inside a single inline container.
  6. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  7. 35 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import DriveFileMenu from "@/components/blocks/drive-file-menu/drive-file-menu";

export default function Page() {
  return <DriveFileMenu />;
}

Drive Folder Menu

@velaui/drive-folder-menu
@velaui/drive-folder-menuOpen Open
pnpm dlx velaui add @velaui/drive-folder-menu

Built from

  1. AvatarAn image element with a fallback for representing the user.
  2. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
  3. ButtonDisplays a button or a component that looks like a button.
  4. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  5. SegmentedA set of mutually exclusive options inside a single inline container.
  6. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  7. 34 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import DriveFolderMenu from "@/components/blocks/drive-folder-menu/drive-folder-menu";

export default function Page() {
  return <DriveFolderMenu />;
}

Drive Grid

@velaui/drive-grid
@velaui/drive-gridOpen Open
pnpm dlx velaui add @velaui/drive-grid

Built from

  1. AvatarAn image element with a fallback for representing the user.
  2. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
  3. ButtonDisplays a button or a component that looks like a button.
  4. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  5. SegmentedA set of mutually exclusive options inside a single inline container.
  6. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  7. 28 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import DriveGrid from "@/components/blocks/drive-grid/drive-grid";

export default function Page() {
  return <DriveGrid />;
}