Svelte implementation of the GOV.UK Design System.
Visit the demo site for examples of the available components.
Getting started
# Create a SvelteKit skeleton project
npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open
Install
npm install @danboscaro/govuk-svelte govuk-frontend
Copy assets
cp -r ./node_modules/govuk-frontend/govuk/assets ./static
Add styles
Styles can be added either from a static css file or from including the sass files from the govuk-frontend library
Using a static css file
Copy the govuk-frontend-4.7.0.min.css file from the dist folder in the govuk-frontend github repository to the static folder in the SvelteKit project
curl https://raw.githubusercontent.com/alphagov/govuk-frontend/v4.7.0/dist/govuk-frontend-4.7.0.min.css -o ./static/govuk-frontend-4.7.0.min.css
Add a link to the css file in the head of the src/app.html
file in the SvelteKit project
<head>
...
<link rel="stylesheet" href="/govuk-frontend-4.7.0.min.css" />
...
</head>
OR
Using sass
Install a module that can read the scss files, for example:
npm install -D sass
Then import the scss files from govuk-frontend into the +page.svelte
/ +layout.svelte
files as required
<script>
import '../../node_modules/govuk-frontend/govuk/all.scss';
</script>
Javascript?
All the svelte components already include all the additional javascript from govuk-frontend so there is no need to add any further js files