@max-ts/svelte

Svelte 5 component library with SSR-compatible native component styles.

Installation

pnpm add @max-ts/svelte

Import the default theme once in the application entry point:

import '@max-ts/svelte/theme.css';

The reset is optional:

import '@max-ts/svelte/reset.css';

The legacy entry point imports both files:

import '@max-ts/svelte/styles.css';

Component styles live in each .svelte file and are included by the consumer's Svelte compiler. They are placed in the max-ts-svelte-components cascade layer so styles supplied through a component's class prop can override the library defaults. Unlayered consumer styles take precedence automatically; layered consumer styles should be declared after max-ts-svelte-components.

Components

<script lang="ts">
  import { Button } from '@max-ts/svelte';
</script>

<Button variant="outline">Save</Button>

Theme contract

The theme preserves the original CSS custom property names, including --colors-primary, --spacing-4 and --fontSize-sm. Override tokens globally or on a DOM subtree:

:root {
  --colors-primary: oklch(0.55 0.2 260);
  --radius-medium: 0.75rem;
}

[data-theme="dark"] {
  --colors-background-paper: oklch(0.18 0.02 264);
  --colors-text-primary: oklch(0.95 0 0);
}

The TypeScript entry point exports the CSS variable references as a theme object. Its Theme type is inferred directly from that object with typeof theme:

import { style } from '@vanilla-extract/css';
import { theme, type Theme } from '@max-ts/svelte/theme';

const tokens: Theme = theme;

export const card = style({
	color: tokens.colors.text.primary,
	padding: tokens.spacing[4],
	borderRadius: tokens.radius.medium,
});

For themes applied to a local subtree, content portalled to document.body does not inherit that subtree's variables. Apply an application-wide theme to :root, or pass a portal target inside the themed subtree where the component API supports it.

For CSS variable completion in Svelte files, add this workspace setting:

{
  "svelte.plugin.css.globals": "node_modules/@max-ts/svelte/dist/theme.css,src/app.css"
}

Development

Markup a component renders itself is styled with short local classes scoped by Svelte. Elements rendered by Bits UI or by another component are styled through their data-slot attribute (plus state attributes such as data-state, data-variant and data-size) inside a :global { ... } block. CSS classes are implementation details; use component props and the theme variables for customization. The former class-map exports (buttonVariants, badgeVariants, alertVariants, spinnerSizes, addonAlignVariants and inputGroupButtonSizes) have been removed.

pnpm run storybook
pnpm run test
pnpm run lint
pnpm run build