w4b.co.uk framework react library
skip to w4b-framework react pageThis component library delivers a coherent, accessible, and visually consistent toolkit for building enterprise-grade React applications. All components embrace a design-system mind-set: predictable props, themeable CSS variables, strong TypeScript typing, and first-class Storybook support. Whether you require form inputs, navigation aids, data visualisation, or layout primitives, the collection is intended to accelerate development while remaining flexible enough for bespoke branding.
buttons
Button
The base clickable element. Offers six predefined styles (primary, secondary, success, error, discrete, none) plus a fully custom variant, optional centring, and aria-friendly states for disabled or pending interactions.LinkButton
A semantic anchor rendered in the button visual style, giving seamless routing without sacrificing accessibility attributes common to buttons.NavLinkButton
A wrapper around React-Router’s NavLink, automatically applying active styles. Ideal for navigation menus that must feel button-like, or not.charts
DonutChart
Presents proportional data as a ring-shaped chart with optional centre label and legend. Segments accept colour, label, and value, while CSS variables expose fine-grained styling control.composites
AIChat
A chat layout that combines grouped input, message list, and textarea control, wired for controlled or uncontrolled text handling.ThemeSwitch
Toggles between design-system themes; sizes and labels can be customised to match brand language.form inputs
DateInput
A masked text input for ISO-like dates. Emits validated date strings through onDateChange and surfaces error styling when needed.RadioGroup
Manages a set of Radio controls, synchronising selected value and keyboard navigation. Direction, size, and custom change callback are all configurable.Radio
Stand-alone radio button that can participate in RadioGroup or operate independently. Five size presets are available.Switch
A binary toggle with configurable size, width, and on/off labels. Supports controlled and uncontrolled modes.TextArea
Multi-line text input with resizable rows, error state, and change handling.TextInput
Single-line input with built-in validation hooks and optional label text.layout and navigation
Group
Core layout primitive for managing direction (row/column), border visibility, padding, and semantic HTML grouping (section, div, article, etc.).CollapsibleGroup
A generic wrapper that can be expanded or collapsed, often used within dashboards or complex forms.Heading
Typographic component mapping heading levels to semantic HTML while offering design-system sizing and optional figure-caption mode.Container
A higher-order wrapper that combines Group attributes with native HTML attributes, ideal for page-level sections.Layout
The primary application frame that wires together nav, outlet areas, and transition timing.NavLayout
Navigation bar generation from React Router routes and theme switch support.OutletLayout
Encapsulates page transitions around React-Router outlets; transition duration is configurable.PageTransition
Low-level animation helper for fade-in/out sequences, driven by boolean props.Accordion
Container that reveals or hides sections. Supports single or multiple open panels and exposes controlled or uncontrolled toggling.AccordionSection
Child element of Accordion providing a title bar and content region with smooth height animation.SkipLink
Accessibility utility that allows keyboard users to jump between page sections.Splitter
Resizable panel component providing min/max width constraints and a state callback, useful for sidebars and inspectors.ErrorPage
Styled container for displaying error information during development or production.svg icons
AISparkle
Animated decorative graphic for AI-related features; animation can be toggled.Chevron
Directional arrow supporting eight orientations, frequently paired with Accordion or navigation items.W4BLogo
Vector rendition of the corporate logo with optional glow effect.Utilities and Helpers
CssVariableArgs / applyCssVariables
Storybook helper that exposes component CSS variables to interactive controls. splitProps
Type-safe utility for separating prop bags into manageable segments.namedColors
A typed dictionary of over 140 CSS colour names for consistent palette references.typedDictionary
Generic TypeScript helper for creating strongly-typed key/value maps.routeHelper
Assists in constructing enriched route objects (id, label, main-route flag) for Layout and NavLinkButton.