Get started
Three lines of setup. Components work with zero props.
Install
pnpm add @tcpsystems/uiLoad the styles
<!-- src/routes/+layout.svelte -->
<script>
import '@tcpsystems/ui/css/fonts.css';
import '@tcpsystems/ui/css/tcp.css';
import { onMount } from 'svelte';
let { children } = $props();
onMount(() => import('@tcpsystems/ui/foundation/elements'));
</script>
{@render children()}// src/main.ts
import '@tcpsystems/ui/css/fonts.css';
import '@tcpsystems/ui/css/tcp.css';
import '@tcpsystems/ui/foundation/elements';Use a component
<script>
import Button from '@tcpsystems/ui/foundation/Button';
</script>
<Button variant="primary">Save</Button>Make it yours
Set any of these on any element. They apply to everything inside.
<html data-theme="dark" data-brand="ember" data-density="compact" data-radius="soft">Try them with the Theme button at the top of the page.
Browse in Storybook
Every story with its controls, for working on the library itself.
Preview
The package isn't on a public registry yet. Install from the repository until it is.