UpSet gallery

Show setup script

<script lang="ts">
	import { UpSet } from '../../../lib/index.js';
	import { genres, makeData } from '../../demo-data.js';

	const data = makeData();
	let selectedDark = $state<string | null>('Drama&Comedy');
</script>

Dark theme

Show code

<UpSet
	{data}
	sets={genres}
	minSize={8}
	color="#63b3ed"
	inactiveColor="#3b4252"
	highlightColor="#f6ad55"
	bind:selected={selectedDark}
/>

Green theme via --upset variables

Set --upset-* variables on any ancestor; the colors follow.

Show code

<div style="--upset-bar: #2f855a; --upset-dot-on: #2f855a; --upset-dot-off: #e2e8f0">
	<UpSet {data} sets={genres} minSize={25} />
</div>

CSS custom properties

Default look. The browser tests set the variables on this section to check each one.

Show code

<UpSet {data} sets={genres} minSize={25} />