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.

Component statuses

Each component in our library has a status that indicates its development stage and readiness for use in production services.

Component statuses help you understand which components are ready for production use and which are still in development. This ensures you can make informed decisions about which components to use in your projects.

Progress statuses

The progress status is shown as a coloured pill next to the component name and indicates the overall development stage:

ExampleComponent

To be developed

To be developed - This is the initial status when component files have been generated but work to build the component has not started. The component is not ready for use.

ExampleComponent

In progress

In progress - The component is being built. The full functionality has not been completed and it may change in the future. Use with caution in production.

ExampleComponent

Baseline completed

Baseline completed - The core functionality has been completed and the component is ready for use. Small changes may still occur in the future.

ExampleComponent

In use

In use - The component is completed and being used in production services. Developers should be mindful of existing uses when making changes.

Quality indicators

Below each component name, you'll see quality indicators showing whether the component meets specific criteria. These are displayed as green ticks (✓) for completed criteria and red crosses (✗) for incomplete ones.

Example with quality indicators

ExampleComponent

Baseline completed
Accessible
Responsive
Prog. enhanced
Reviewed
Tested

Quality criteria explained

Accessible
Accessible - The component has been developed with reference to WCAG guidelines, checked against our accessibility checklist, and tested with screen readers.

Responsive
Responsive - The component has been checked against our mobile design checklist and tested on multiple mobile devices.
Prog. enhanced
Prog. enhanced - Progressive enhancements have been considered and, if appropriate, implemented for this component.
Reviewed
Reviewed - The component requirements, functionality, and code have been reviewed and approved by the team.

Tested
Tested - The component's use within products or prototyping has been tested with real props and approved for production use.

How to interpret statuses

Safe for production

  • Baseline completed or In use status
  • Green tick for Accessible
  • Green tick for Responsive
  • Green tick for Reviewed

Use with caution

  • In progress status
  • Missing accessibility or responsive indicators
  • Components not yet reviewed or tested
When in doubt, contact the design system team for guidance on whether a component is suitable for your use case. We're here to help you make the right choice for your service.

Next steps