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 -- --openInstall
npm install @danboscaro/govuk-svelte govuk-frontendCopy assets
cp -r ./node_modules/govuk-frontend/govuk/assets ./staticAdd 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.cssAdd 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 sassThen 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