Public Good Design System → NHS UK → Svelte + Tailwind + DaisyUI

A modern, accessible Svelte component library inspired by the NHS UK Design System, built with Svelte 5, TypeScript, Tailwind CSS v4, and DaisyUI v5.

One of three variations:

• NHS UK → HTML CSS Javascript
• NHS UK → Next.js Tailwind DaisyUI
• NHS UK → Svelte Tailwind DaisyUI (This one)

Overview

This project converts NHS UK Design System components into reusable Svelte 5 components styled with Tailwind CSS utility classes and DaisyUI component classes. It is intended to serve as a foundation for public good web applications that need accessible, well-structured UI components.

Tech Stack

• Svelte 5 with runes ($props, $state, $derived, $bindable)
• SvelteKit 2 for routing, SSR, and static generation
• TypeScript 5 with strict mode
• Tailwind CSS v4 with CSS-based configuration
• DaisyUI v5 component classes and theming
• Vite 6 for development and bundling

Getting Started

Prerequisites

• Node.js 20.9.0 or 22.11.0+
• npm

Installation

git clone <repository-url>
cd public-good-design-system-nhs-uk-svelte-tailwind-daisyui
npm install

Development

npm run dev       # Start development server
npm run build     # Build for production
npm run preview   # Preview production build locally
npm run check     # Run TypeScript and Svelte checks

Components (36)

All components are available as Svelte 5 components with TypeScript props interfaces.

Form Elements

Navigation

Content Display

Project Structure

src/
  app.css                    # Tailwind + DaisyUI theme configuration
  app.html                   # HTML shell
  lib/
    index.ts                 # Library entry point (re-exports)
    types.ts                 # TypeScript interfaces for all components
    components/
      index.ts               # Component barrel exports
      action-link/           # Each component in its own directory
      back-link/
      breadcrumb/
      button/
      ...
  routes/
    +layout.svelte           # Root layout
    +page.svelte             # Home page
    components/+page.svelte  # Component showcase/demo page

Component Usage

<script>
  import { Button, Card, Header } from '$lib/components';
</script>

<Header
  logoText="My Service"
  showNavigation={true}
  navigationItems={[
    { text: 'Home', href: '/' },
    { text: 'About', href: '/about' }
  ]}
/>

<Card
  heading="Welcome"
  description="This is a card component."
  href="/details"
/>

<Button variant="primary">Save and continue</Button>

Theming

The design system uses a custom DaisyUI theme named "public-good" defined in src/app.css. Theme colours are configured using oklch colour space for perceptual uniformity:

• Primary: Sky blue (oklch(68.47% 0.1479 237.32))
• Secondary: Slate grey
• Accent: Amber
• Info/Success/Warning/Error: Semantic colours

To customise the theme, edit the @plugin "daisyui/theme" block in src/app.css.

Accessibility

Components follow WCAG AA guidelines:

• Semantic HTML elements with proper ARIA attributes
• Keyboard navigation support (arrow keys, tab, enter, escape)
• Screen reader compatible labels and descriptions
• Focus management and visible focus indicators
• aria-describedby linking for hints and error messages

Configuration Files

Acknowledgments

• NHS UK Design System for the original component designs and accessibility patterns
• GOV.UK Design System for design system principles
• Svelte, Tailwind CSS, and DaisyUI communities

License

MIT License