Feature 302 - Time-off balances with request approvalPro

An HR leave layout: leave-type balance rings on the left and a request card on the right that submits, shows manager approval, and deducts from the balance.

About Feature 302

An HR leave layout: leave-type balance rings on the left and a request card on the right that submits, shows manager approval, and deducts from the balance.

Feature 302 is a feature block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 104 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • hr
  • time off
  • pto
  • leave
  • approval

Installation

  1. Set up your project with npx chocolateui init and npx chocolateui login (see the installation guide).
  2. Run the Chocolate UI CLI:
npx chocolateui add feature-302

Dependencies installed automatically: lucide-react, motion.

Uses: button, reveal, utils.

Usage

import Feature302 from "@/components/blocks/feature-302"

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

FAQ