Benefit program

Keeps programme availability, supplied eligibility, award terms, and criterion assessments separate.

Preview

Community project grant

Applications open

Provider: Example council
Your eligibility: Not assessed
Award: Amount determined by provider
Application deadline: 30 September, as supplied

Project locationNot reviewed
Project planEvidence requested

In action

Explore support

An example programme. Availability and personal eligibility are separate records.

Community project grant

Applications open

Provider: Example council
Your eligibility: Not assessed
Award: Amount determined by the provider
Application deadline: 30 September 2026, as supplied

Project locationNot reviewed
The provider reviews the supplied location evidence.
Project planEvidence requested

When to use

Use it for

Public benefits, grants, subsidies, and funding opportunities with source-owned eligibility assessments.
Display programme availability separately from an applicant’s eligibility and the programme’s award terms.

Not for

Deciding eligibility from criteria, personal data, income, or a model-generated recommendation.
Implying an award is approved because applications are open or some criteria are satisfied.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { BenefitProgram } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/benefit-program.

2. Vendor the source

npx @noorddev/vlak-cli add benefit-program

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/benefit-program.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { BenefitProgram } from "@noorddev/vlak-react";

<BenefitProgram programName="Community project grant" provider="Example council" status="Applications open" eligibility="Not assessed" awardLabel="Award amount not supplied" deadlineLabel="30 September 2026, as supplied" criteria={[{ id: "location", label: "Project location", status: "Not reviewed", description: "Location evidence is reviewed by the provider" }]} />

Props

BenefitProgram

Programme availability, supplied eligibility, and award terms kept as distinct facts.

Prop	Type	Default	Description
`programName`required	`string`
`provider`	`ReactNode`
`status`required	`ReactNode`		Supplied programme availability, separate from a person's eligibility.
`eligibility`required	`ReactNode`
`awardLabel`	`ReactNode`
`awardDetails`	`ReactNode`
`deadlineLabel`	`ReactNode`
`criteria`required	`readonly BenefitProgramCriterion[]`
`description`	`ReactNode`
`criteriaEmptyLabel`	`ReactNode`	`"Eligibility criteria not supplied"`

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Tab, Enter, Space`	Supplied action links and buttons use native keyboard behavior. Criteria are static readable items.

Accessibility

Programme name labels a group; programme facts use a description list and criteria use a named list.
Eligibility, criterion status, and programme availability are visible text rather than color-only indicators.
Missing provider, award, deadline, or criteria are explicitly described. Native root attributes and div refs pass through.
Provide working child controls with at least 44px targets when an application or information action is available.

Markup

<div class="rs-benefit-program" role="group" aria-label="Community project grant"><div class="rs-benefit-program-header"><p class="rs-benefit-program-name">Community project grant</p><span class="rs-benefit-program-status">Applications open</span></div><dl class="rs-benefit-program-facts"><div class="rs-benefit-program-field"><dt class="rs-benefit-program-label">Your eligibility</dt><dd class="rs-benefit-program-value">Not assessed</dd></div><div class="rs-benefit-program-field"><dt class="rs-benefit-program-label">Award</dt><dd class="rs-benefit-program-value">Award amount not supplied</dd></div></dl><ul class="rs-benefit-program-criteria" aria-label="Eligibility criteria"><li class="rs-benefit-program-criterion"><div class="rs-benefit-program-criterion-head"><strong>Project location</strong><span>Not reviewed</span></div></li></ul></div>

Classes

.rs-benefit-program.rs-benefit-program-header.rs-benefit-program-name.rs-benefit-program-status.rs-benefit-program-detail.rs-benefit-program-facts.rs-benefit-program-field.rs-benefit-program-label.rs-benefit-program-value.rs-benefit-program-criteria.rs-benefit-program-criterion.rs-benefit-program-criterion-head.rs-benefit-program-actions