Justin for Svelte

A Svelte 5 component library driven by Figma M3 Expressive tokens

Browse the components, their props, and live examples. Every component references Material 3 Expressive tokens — light and dark modes come for free.

Install

bun add @davidhorn/justin
bun add @davidhorn/justin

Usage

Import the components and the styles bundle, then use them anywhere.

<script>
	import { DhButton, DhTextInput } from '@davidhorn/justin';
	import '@davidhorn/justin/styles';

	let name = $state('');
</script>

<DhTextInput bind:value={name} label="Your name" />
<DhButton variant="primary" text="Submit" />

Components

Action
Input
Feedback
Navigation
Content
Foundations