Svelte 5 component library

CropWatch UI

The shared interface kit behind CropWatch: 52 accessible components, charts and helpers built on plain CSS custom properties, with matching dark and light themes. Browse the components below or from the sidebar. Every page has live examples, the full API and copy-paste snippets.

For designers

Design style guide

Colour tokens for dark and light mode with measured contrast ratios, the logo and brand colours, typography, spacing, chart colours, form anatomy and a hand-off checklist. Start here before designing a CropWatch screen.

Download PDF

Components

Layout

Form Controls

Data Display

Feedback & Overlays

Charts

Helpers

Full Page Demos

Getting started

  1. Point the scope at GitHub Packages. Add this to your project's .npmrc, with a token that has read:packages.
    .npmrc Copy code 
    @cropwatchdevelopment:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
  2. Install the package.
    Terminal Copy code 
    pnpm add @cropwatchdevelopment/cwui
  3. Load the styles once in your root layout. This single import brings in the design tokens and both themes.
    src/routes/+layout.svelte Copy code 
    <script lang="ts">
	import '@cropwatchdevelopment/cwui/styles';

	let { children } = $props();
</script>

{@render children()}
  4. Choose a theme. Themes switch with the data-theme attribute on <html>, or use CwThemePicker to let people choose.
    src/app.html Copy code 
    <!-- app.html: dark is the default; set "light" to switch -->
<html lang="en" data-theme="dark">

Upgrading an existing install

Clear local build artifacts first so SvelteKit picks up the new components.

Terminal Copy code 
rm -rf node_modules .svelte-kit
pnpm install
pnpm up @cropwatchdevelopment/cwui --latest