Cookies on MHCLG Svelte Component Library

We use some essential cookies to make this service work.

We'd like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.

View cookies

Alpha This service is in development and intended to be production-ready and available for use by the digital community in Autumn 2025.

About & Benefits

Discover the advantages of using the MHCLG Svelte Component Library and learn about our development philosophy and approach.

Why Svelte?

We chose Svelte as the foundation for our component library because of its exceptional benefits for government digital services:

  • Superior performance - Svelte compiles to vanilla JavaScript, resulting in smaller bundle sizes and faster load times
  • Excellent SEO - Server-side rendering capabilities ensure your content is accessible to search engines and users with JavaScript disabled
  • Developer experience - Clean, readable syntax that's easy to learn and maintain
  • No runtime overhead - Unlike other frameworks, Svelte moves work to compile time, reducing the JavaScript your users need to download
  • Built-in reactivity - Simple, intuitive state management without complex patterns or additional libraries

Multi-Design System Approach

Our component library brings together the best components from multiple established design systems, creating a comprehensive toolkit for government digital services:

Government Design Systems

  • GOV.UK Design System (GDS)
  • Ministry of Justice (MoJ)
  • Ministry of Defence (MoD)
  • GOV.UK Publishing Components
  • Many more...

Component Types

  • Standard UI components
  • Data visualisation charts, maps, and infographics
  • Layout components
  • Content components

Custom Designs

  • Data-heavy interfaces
  • Specialised visualisations
  • Domain-specific patterns

Focus on Data Visualisation

While we provide comprehensive UI components, we have a particular strength in data visualisation:

  • Chart components - Interactive, accessible charts for displaying government data
  • Data tables - Advanced table components for complex datasets
  • Dashboard elements - Components specifically designed for data-rich interfaces
  • Maps - Interactive, user friendly mapping components to present complex geographical data
  • Interactive infographics - Visually rich components to help summarise complex data in an engaging and accessible way
  • Performance optimised - Efficient rendering of large datasets

Our Development Philosophy

We are committed to writing components in the most performant, idiomatic, and declarative way possible. This approach ensures:

Performant

Every component is optimised for speed and efficiency, minimising bundle size and runtime overhead.

Idiomatic & Declarative

We follow the latest Svelte 5 best practices and use declarative coding patterns, making our code familiar to Svelte developers. This differs from the vanilla JavaScript imperative patterns used by the standard GOV.UK Frontend package.

Flexible

We design component APIs to be simple for basic use cases, but flexible enough for developers to customize for niche requirements. Clear, readable component interfaces that express what they do, not how they do it.

Collaborative

Easy-to-understand, organised code that makes it simple for others to help contribute and maintain.

Accessibility & Progressive Enhancement

We take accessibility seriously and carefully develop all our components to meet the highest standards:

  • WCAG compliance - All components are developed towards meeting WCAG 2.2 AA standards
  • Progressive enhancement - Components work without JavaScript and are enhanced when it's available
  • Device compatibility - Tested across all types of devices, from basic mobile phones to modern desktops
  • Screen reader support - Proper ARIA labels, roles, and semantic HTML structure
  • Keyboard navigation - Full keyboard accessibility for all interactive components
Our commitment to accessibility ensures that government services built with our components are usable by everyone, regardless of their abilities or the technology they use.

Real-World Testing & Validation

We don't just build components in isolation. Our library is actively used and tested in real government projects:

  • Production usage - Components are actively used across multiple MHCLG digital services
  • User research - Regular testing with real users through our in-house user research team
  • UX design validation - Continuous refinement based on insights from our experienced UX designers
  • Field testing - Components are battle-tested in live government services
  • Iterative improvement - Regular updates based on real-world feedback and usage patterns

Government Design Principles & Standards

The MHCLG Svelte Component Library helps teams that work on government services follow the Government Design Principles and GOV.UK Service Manual. This library also follows the GOV.UK style guide and GOV.UK content design guidance.

By using our components, you can be confident that your service will:

  • Meet government standards - All components are built to comply with established government design and content guidelines
  • Follow proven patterns - Based on research and testing from across government, ensuring consistency with user expectations
  • Maintain brand consistency - Mostly consistent with the GOV.UK visual identity and interaction pattern principles, but with a focus on data-rich interfaces where appropriate based on user research.
  • Support service teams - Reduces the burden on teams to interpret and implement design guidance from scratch

Interactive Documentation & Examples

We believe in making it as easy as possible for developers to evaluate and implement our components:

  • Live playground ("Try before you buy") - Interactive documentation allows you to quickly tweak component props and see real-time changes. Test components with your own data and requirements before implementation.
  • Copy-ready code - All examples can be copied directly into your codebase, saving development time
  • Extensive usage examples - Multiple visual examples for each component showing different use cases and configurations
  • Code snippets - Ready-to-use code examples of how to use each component that demonstrate best practices and common patterns
Our interactive documentation ensures you can quickly evaluate whether a component fits your needs and get up and running with minimal effort.

Getting Started

Ready to start using our component library? Check out our installation guide and explore our comprehensive component collection.

Installation guide | Browse components | Design patterns