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.
Preview
The package isn't on a public registry yet. Install from the repository until it is.