Vela UI Docs
venizia.ai

Storage

The Storage admin Dashboard on the app shell: the platform usage panel in the drive usage-card anatomy - organizations, objects and stored as used / ceilings (39.1 / 47 GiB) with a halftone meter and the free space footnote, the stored-by-app halftone strip under them and an as-of stamp with refresh - then the By organization table in the drive file-table anatomy - quota filter pills that narrow the rows, toned quota pills with near-limit and at-limit states, app chips, a count pill and the pager - with the per-row edit-quota dialog that re-tones the pill and re-stamps the as-of time.

Design system

This family's design — colors, typography, components, layout, motion and the anti-patterns — is documented in the storage dashboard design system (taste-design format), grounded in the app's data model and the app layout.

Storage

@velaui/storage
@velaui/storageOpen Open
pnpm dlx velaui add @velaui/storage

Built from

  1. AvatarAn image element with a fallback for representing the user.
  2. BadgeDisplays a badge or a component that looks like a badge.
  3. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
  4. ButtonDisplays a button or a component that looks like a button.
  5. DialogA modal overlay for confirmations, decisions, and short flows.
  6. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  7. Input NumberA number input component for forms and user data entry with built-in styling and accessibility features.
  8. SegmentedA set of mutually exclusive options inside a single inline container.
  9. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  10. SwitchA control that toggles between checked and unchecked states.
  11. 20 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import Storage from "@/components/blocks/storage/storage";

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

Storage Access Keys

@velaui/storage-access-keys
@velaui/storage-access-keysOpen Open
pnpm dlx velaui add @velaui/storage-access-keys

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. DialogA modal overlay for confirmations, decisions, and short flows.
  5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  6. FieldComposes a label, a control, a description and an error message into one form field.
  7. InputA text input component for forms and user data entry with built-in styling and accessibility features.
  8. SegmentedA set of mutually exclusive options inside a single inline container.
  9. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  10. 21 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import StorageAccessKeys from "@/components/blocks/storage-access-keys/storage-access-keys";

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

Storage Credential Create

@velaui/storage-credential-create
@velaui/storage-credential-createOpen Open
pnpm dlx velaui add @velaui/storage-credential-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. ComboboxAutocomplete input with a filterable list of suggestions, single or multi-select.
  5. DialogA modal overlay for confirmations, decisions, and short flows.
  6. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  7. FieldComposes a label, a control, a description and an error message into one form field.
  8. InputA text input component for forms and user data entry with built-in styling and accessibility features.
  9. SegmentedA set of mutually exclusive options inside a single inline container.
  10. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  11. 21 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import StorageCredentialCreate from "@/components/blocks/storage-credential-create/storage-credential-create";

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

Storage Credentials

@velaui/storage-credentials
@velaui/storage-credentialsOpen Open
pnpm dlx velaui add @velaui/storage-credentials

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. ComboboxAutocomplete input with a filterable list of suggestions, single or multi-select.
  5. DialogA modal overlay for confirmations, decisions, and short flows.
  6. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  7. FieldComposes a label, a control, a description and an error message into one form field.
  8. InputA text input component for forms and user data entry with built-in styling and accessibility features.
  9. SegmentedA set of mutually exclusive options inside a single inline container.
  10. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  11. 24 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import StorageCredentials from "@/components/blocks/storage-credentials/storage-credentials";

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

Storage Objects

@velaui/storage-objects
@velaui/storage-objectsOpen Open
pnpm dlx velaui add @velaui/storage-objects

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. 27 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import StorageObjects from "@/components/blocks/storage-objects/storage-objects";

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

Storage Organization Detail

@velaui/storage-organization-detail
@velaui/storage-organization-detailOpen Open
pnpm dlx velaui add @velaui/storage-organization-detail

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. DialogA modal overlay for confirmations, decisions, and short flows.
  5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  6. Input NumberA number input component for forms and user data entry with built-in styling and accessibility features.
  7. SegmentedA set of mutually exclusive options inside a single inline container.
  8. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  9. SwitchA control that toggles between checked and unchecked states.
  10. 19 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import StorageOrganizationDetail from "@/components/blocks/storage-organization-detail/storage-organization-detail";

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

Storage Organizations

@velaui/storage-organizations
@velaui/storage-organizationsOpen Open
pnpm dlx velaui add @velaui/storage-organizations

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. 21 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import StorageOrganizations from "@/components/blocks/storage-organizations/storage-organizations";

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

Storage Over Quota

@velaui/storage-over-quota
@velaui/storage-over-quotaOpen Open
pnpm dlx velaui add @velaui/storage-over-quota

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. DialogA modal overlay for confirmations, decisions, and short flows.
  5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  6. Input NumberA number input component for forms and user data entry with built-in styling and accessibility features.
  7. SegmentedA set of mutually exclusive options inside a single inline container.
  8. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  9. SwitchA control that toggles between checked and unchecked states.
  10. 17 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import StorageOverQuota from "@/components/blocks/storage-over-quota/storage-over-quota";

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

Storage Overview

@velaui/storage-overview
@velaui/storage-overviewOpen Open
pnpm dlx velaui add @velaui/storage-overview

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. 18 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import StorageOverview from "@/components/blocks/storage-overview/storage-overview";

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

Storage Upload

@velaui/storage-upload
@velaui/storage-uploadOpen Open
pnpm dlx velaui add @velaui/storage-upload

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. ProgressA linear or circular indicator showing task completion, with color that shifts by status.
  6. SegmentedA set of mutually exclusive options inside a single inline container.
  7. SheetA side panel that slides in over the page for details, forms, and secondary flows.
  8. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  9. UploaderA drag-and-drop file field with per-file progress, replace, and error states.
  10. 29 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import StorageUpload from "@/components/blocks/storage-upload/storage-upload";

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