Vela UI Docs
venizia.ai

Payroll

The Payroll workspace on the app shell: the 240px Payroll panel and the Bảng lương page - the Excel dropzone with its upload configuration (choosing a file runs the upload, column detection and template matching in place), the issued pay periods and the countdown to the next scheduled send.

Payroll

@velaui/payroll
@velaui/payrollOpen Open
pnpm dlx velaui add @velaui/payroll

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. CheckboxA control that allows the user to toggle between checked and not checked.
  5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  6. SegmentedA set of mutually exclusive options inside a single inline container.
  7. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  8. 27 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import Payroll from "@/components/blocks/payroll/payroll";

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

Payroll Create

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

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. CheckboxA control that allows the user to toggle between checked and not checked.
  6. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  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. 35 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import PayrollCreate from "@/components/blocks/payroll-create/payroll-create";

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

Payroll Empty

@velaui/payroll-empty
@velaui/payroll-emptyOpen Open
pnpm dlx velaui add @velaui/payroll-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. CheckboxA control that allows the user to toggle between checked and not checked.
  5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  6. SegmentedA set of mutually exclusive options inside a single inline container.
  7. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  8. 27 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import PayrollEmpty from "@/components/blocks/payroll-empty/payroll-empty";

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

Payroll History

@velaui/payroll-history
@velaui/payroll-historyOpen Open
pnpm dlx velaui add @velaui/payroll-history

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 PayrollHistory from "@/components/blocks/payroll-history/payroll-history";

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

Payroll Payslip

@velaui/payroll-payslip
@velaui/payroll-payslipOpen Open
pnpm dlx velaui add @velaui/payroll-payslip

Built from

  1. ButtonDisplays a button or a component that looks like a button.
  2. 5 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import PayrollPayslip from "@/components/blocks/payroll-payslip/payroll-payslip";

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

Payroll Template

@velaui/payroll-template
@velaui/payroll-templateOpen Open
pnpm dlx velaui add @velaui/payroll-template

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. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  6. SegmentedA set of mutually exclusive options inside a single inline container.
  7. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  8. 24 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import PayrollTemplate from "@/components/blocks/payroll-template/payroll-template";

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

Payroll Upload

@velaui/payroll-upload
@velaui/payroll-uploadOpen Open
pnpm dlx velaui add @velaui/payroll-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. CheckboxA control that allows the user to toggle between checked and not checked.
  5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  6. SegmentedA set of mutually exclusive options inside a single inline container.
  7. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  8. 27 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import PayrollUpload from "@/components/blocks/payroll-upload/payroll-upload";

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