A comprehensive component library for government digital services, built with Svelte 5 and following GOV.UK Design System principles.
This component library is designed for use with:
-
SvelteKit projects - The components are built for SvelteKit applications
-
Svelte 5 - Components use the latest Svelte 5 syntax and runes
Visit our component library documentation for:
- Interactive component examples
- API documentation
- Usage patterns and best practices
- Installation guides
The package is publicly available on npm:
npm install @communitiesuk/svelte-component-library@latestTo ensure GOV.UK styles are applied correctly, add this script tag to your app.html file in the body section:
<script>
document.body.className +=
" js-enabled" +
("noModule" in HTMLScriptElement.prototype
? " govuk-frontend-supported"
: "");
</script>This is required because the GOV.UK Frontend CSS checks the document body for JavaScript availability to progressively enhance components.
To use the refreshed GOV.UK brand (launched June 2025), add the govuk-template--rebranded class to your app.html body element:
<body class="govuk-template--rebranded">
<!-- Your app content -->
</body>When to use rebrand:
- Global CSS styles: The
govuk-template--rebrandedclass on<body>automatically applies rebranded styles to all components - Component markup: Some components (like Footer and Header) have a
rebrandprop that controls whether they show additional rebranded markup elements (like the crown logo). The rebrand prop is set to true by default on all relavent componets - you can specify false should you want to keep the old markup and assets. - Assets: Rebranded components will use updated assets (logos, icons) from the
/assets/rebrand/folder
Example with rebranded Footer:
import { Footer } from "@communitiesuk/svelte-component-library";
// Use rebrand=true to show the crown logo at top of footer
<Footer rebrand={true} />;Import components directly from the package:
import {
InternalHeader,
NotificationBanner,
WarningText,
SearchAutocomplete,
Accordion,
} from "@communitiesuk/svelte-component-library";This guide outlines the steps to bump the version of your package, tag the release in Git, and publish to npm.
Before versioning, ensure all your code changes are committed to Git:
git add .
git commit -m "Your descriptive commit message"Make sure you are on your main development branch you want to release (e.g., main).
Use the npm version command to update package.json and package-lock.json, create a commit, and create an annotated Git tag. Choose one of the following based on Semantic Versioning (SemVer):
-
Patch Release (Bug fixes, tiny changes - e.g., 1.0.0 → 1.0.1):
npm version patch
-
Minor Release (New features, backwards compatible - e.g., 1.0.0 → 1.1.0):
npm version minor
-
Major Release (Breaking changes - e.g., 1.0.0 → 2.0.0):
npm version major
This command will:
- Update the version number in
package.jsonandpackage-lock.json - Create a new commit with the version bump
- Create a Git tag with the new version number
Push the commit and the new tag created by npm version to the remote Git repository (e.g., GitHub):
git push && git push --tagsgit push: Pushes the version commit.git push --tags: Pushes the newly created version tag.
- Go to the GitHub repository
- Click on "Releases" in the right sidebar
- Click "Create a new release"
- Select the tag you just created (e.g.,
v1.0.1) - Add a release title and description
- Click "Publish release"
Once you create the GitHub release, If you now go to the "Actions" tab in the repo's horizontal nav bar, you'll see the publish workflow being triggered. The GitHub Actions workflow (.github/workflows/npm-publish.yml) will automatically:
- Build the package
- Publish it to npm public registry
- Make it available for installation via
npm install @communitiesuk/svelte-component-library
After the GitHub Action completes, verify that your package was published successfully:
- Check the npm package page
- Try installing the new version in a test project:
npm install @communitiesuk/svelte-component-library@latest
- Only create releases from the "main" branch to ensure stability
- Always test changes thoroughly before creating a release
- Consider creating pre-release versions for testing:
npm version prerelease --preid=alpha
This project is built with create-svelte. Read more about creating a library in the docs.
Start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openEverything inside src/lib is part of your library, everything inside src/routes can be used as a showcase or preview app.
To build your library:
npm run packageTo create a production version of your showcase app:
npm run buildYou can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.