Skip to main content

Getting started

This component library is a svelte implementation of the GOV.UK Design System. It's intended to be used within a SvelteKit project in conjunction with govuk-frontend

All the options for the nunjucks macros are available to use with the svelte components

Svelte

<script>
  import { Radios } from '@danboscaro/govuk-svelte'
</script>

<Radios {...{
  name: "where-do-you-live",
  fieldset: {
    legend: {
      text: "Where do you live?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  items: [
    {
      value: "england",
      text: "England"
    },
    {
      value: "scotland",
      text: "Scotland"
    },
    {
      value: "wales",
      text: "Wales"
    },
    {
      value: "northern-ireland",
      text: "Northern Ireland"
    }
  ]
}} />

Nunjucks


{% from "govuk/components/radios/macro.njk" import govukRadios %}

{{ govukRadios({
  name: "where-do-you-live",
  fieldset: {
    legend: {
      text: "Where do you live?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  items: [
    {
      value: "england",
      text: "England"
    },
    {
      value: "scotland",
      text: "Scotland"
    },
    {
      value: "wales",
      text: "Wales"
    },
    {
      value: "northern-ireland",
      text: "Northern Ireland"
    }
  ]
}) }}

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

Demos of all the components are available from the menu with snippets generated from the examples in the govuk-frontend github repo as a starter to include in a project