Examples
Realistic compositions built from Varde utilities and components — from pricing tables to court booking. Open one to see the markup behind it.
Data display
Activity feedA vertical timeline a faint rail down the left with an inverted color-mode dot marking each event.
BemanningA staffing grid with a week view and a filter drawer.
apptablepopoverDeviationsA route-package deviation list with tabs, filters, and a subgrid table.
tabledashboardcompositionKPIA KPI dashboard with tinted cards and trend pills.
PricingThree tiers, with the middle one featured by inverting its `color-mode`.
commercepricingSettings listRows separated by faint bottom borders, each with an icon, a label, and a trailing control.
TableAn orders table with status badges and a show-more action.
TimesheetA weekly time tracking grid with per-day inputs and totals.
apptableformsUpcoming eventsAn inverted color-mode panel listing upcoming events, each row resetting to its own nested color-mode.
color-modecompositionNavigation
Forms & inputs
ChipsFilter chips from pill buttons and an inverted color-mode.
ChoiceboxA selectable card pair that swaps its palette on selection.
Court bookingA day picker and venue columns for booking a squash court.
schedulingbookingDatepickerA static calendar panel with month navigation and a selected day.
componentcompositionSplit buttonsA button with a dropdown trigger, in three variants.
Time slot bookingA seven-day picker with a pair of bookable time slots.
schedulingbookingVariantdag scheduleA schedule for an event day, from morning coffee to quiz.
scheduling