Svelte Components Documentation

Welcome to the documentation for the Svelte Components library. This guide provides detailed usage, props, events, accessibility, and theming information for each component.

Components

• Accordion
• Badge
• Banner
• Breadcrumbs
• Button
• Calendar

Each component page includes:

• Usage: Example code and snippet usage.
• Props: All available props with types and descriptions.
• Callbacks & Bindings: onChange callbacks and bindable state where supported.
• Accessibility: a11y features and recommendations.
• Theming: Customization and CSS variables.

For more details, see the individual component documentation files.

Quick Examples (Svelte 5)

Accordion

<script>
	import {
		Accordion,
		AccordionItem,
		AccordionHeader,
		AccordionPanel
	} from '@michaelcuneo/svelte-components';

	let openSections = [];

	function handleAccordionChange(nextValue) {
		console.log('Accordion changed:', nextValue);
	}
</script>

<Accordion multiple bind:value={openSections} onChange={handleAccordionChange} variant="material">
	<AccordionItem value="first">
		<AccordionHeader>First section</AccordionHeader>
		<AccordionPanel>First panel content</AccordionPanel>
	</AccordionItem>
	<AccordionItem value="second">
		<AccordionHeader>Second section</AccordionHeader>
		<AccordionPanel>Second panel content</AccordionPanel>
	</AccordionItem>
</Accordion>

Tabs

<script>
	import { Tabs, TabList, Tab, TabPanel } from '@michaelcuneo/svelte-components';

	let activeTab = 0;

	function handleTabChange(nextValue) {
		console.log('Tab changed:', nextValue);
	}
</script>

<Tabs
	bind:value={activeTab}
	onChange={handleTabChange}
	variant="material"
	tablist={() => (
		<TabList>
			<Tab>Overview</Tab>
			<Tab>Details</Tab>
		</TabList>
	)}
	panels={() => (
		<>
			<TabPanel>Overview content</TabPanel>
			<TabPanel>Details content</TabPanel>
		</>
	)}
/>

Overriding Styles

You can override the default styles of any component using the class or style props, or by targeting the component's CSS classes in your global stylesheet.

1. Using the class Prop

Add your own class and define styles in your CSS:

<Button class="my-custom-btn" />

.my-custom-btn {
	background: linear-gradient(90deg, #ff8a00, #e52e71);
	color: white;
	border-radius: 8px;
}

2. Using the style Prop

Pass inline styles directly:

<Button style="background: #222; color: #fff;" />

3. Overriding CSS Variables

Many components use CSS variables for easy theming. You can override these in your global CSS or via the style prop:

:root {
	--sc-color-primary: #e52e71;
	--sc-color-surface: #222;
}

or

<Button style="--sc-color-primary: #e52e71;" />

4. Targeting Component Classes

Override styles by targeting component classes:

.ui-button {
	font-weight: bold;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

Global Theming & CSS Variables

The Svelte Components library is fully themeable using CSS variables. Below is a comprehensive list of all CSS variables used across components. You can override these globally (e.g., in :root), per component, or inline via the style prop.

How to Override

Globally:

:root {
	--sc-color-primary: #e52e71;
	--sc-radius-md: 10px;
	--sc-elevation-2: 0 4px 12px rgba(0, 0, 0, 0.18);
	/* ...etc */
}

Per Component:

<Button style="--button-bg: #333; --button-fg: #fff;" />

CSS Variables Reference

Color Variables

• --sc-color-primary: Primary accent color
• --sc-color-secondary: Secondary accent color
• --sc-color-success: Success/positive color
• --sc-color-warning: Warning color
• --sc-color-error: Error/negative color
• --sc-color-surface: Main surface background
• --sc-color-surface-20/30/40/50/80: Surface tints
• --sc-color-on-surface: Foreground on surface
• --sc-color-on-accent: Foreground on accent
• --sc-color-outline: Outline/border color
• --sc-color-focus: Focus ring color
• --sc-color-muted: Muted/placeholder text
• --sc-color-black: Black fallback
• --sc-color-white: White fallback

Elevation & Shadow

• --sc-elevation-1/2/3/4/5: Shadow presets for depth
• --sc-neu-shadow, --sc-neu-highlight: Neumorphic shadow/highlight
• --sc-glass-shadow, --sc-glass-highlight: Glassmorphism effects

Radius & Spacing

• --sc-radius-xs/sm/md/lg/full: Border radius presets
• --sc-space-sm/md/lg: Spacing presets

Typography

• --sc-font-family-sans: Default sans-serif font
• --sc-step--1/0/1: Font size scale

Component-Specific Variables

Accordion

• --accordion-bg, --accordion-fg, --accordion-border, --accordion-shadow, --accordion-header-hover-bg

Badge

• --badge-bg, --badge-fg, --badge-border, --badge-radius, --badge-font

Button

• --button-bg, --button-fg, --button-radius, --button-border, --button-shadow, --button-font-family, --button-padding-x, --button-padding-y, --button-gap, --button-focus-outline, --button-ripple-color, --button-neu-shadow-light, --button-neu-shadow-dark, --button-neu-shadow-hover-dark, --button-neu-shadow-active, --button-bg, --button-fg, --button-shadow

Calendar

• --calendar-bg, --calendar-fg, --calendar-border, --calendar-radius, --calendar-font-family, --calendar-weekday-color, --calendar-day-selected-bg, --calendar-day-selected-color, --calendar-day-range-bg, --calendar-shadow, --calendar-day-bg, --calendar-day-border

ColorSelector

• --color-selector-bg, --color-selector-fg, --color-selector-border, --color-selector-radius, --color-selector-shadow

DatePicker

• --date-picker-gap, --date-picker-padding, --date-picker-bg

Dialog

• --dialog-bg, --dialog-fg, --dialog-radius, --dialog-shadow, --dialog-overlay-bg, --dialog-title-font-family, --dialog-title-font-size, --dialog-content-font-family, --dialog-content-font-size

Dropdown

• --dropdown-bg, --dropdown-fg, --dropdown-radius, --dropdown-label-color, --dropdown-label-floated-color, --dropdown-menu-bg, --dropdown-item-hover-bg, --dropdown-item-focus-outline, --dropdown-helper-color, --dropdown-error-color, --dropdown-error-ring, --dropdown-border, --dropdown-menu-radius, --dropdown-menu-shadow

IconButton

• --icon-button-fg, --icon-button-accent, --icon-button-accent-fg, --icon-button-accent-hover, --icon-button-font-family, --icon-button-focus-outline, --icon-button-bg, --icon-button-shadow, --icon-button-border

Input

• --input-bg, --input-fg, --input-border, --input-label-color, --input-label-active, --input-placeholder, --input-focus-outline, --input-error, --input-helper

Lightbox

• --sc-elevation-4, --sc-color-on-surface, --sc-color-surface, --sc-color-primary, --sc-color-focus, --sc-elevation-2, --sc-elevation-1, --sc-color-primary, --sc-color-focus

Loader

• --loader-color

Menu

• --menu-link-color, --menu-link-hover-color

Popover

• --sc-color-outline, --sc-color-surface, --sc-color-on-surface, --sc-elevation-2, --sc-color-focus, --sc-color-primary

Radio

• --radio-color, --radio-border-color, --radio-label-color, --radio-focus-outline

Slider

• --slider-label-color, --slider-track-bg, --slider-progress-bg, --slider-thumb-bg, --slider-tooltip-bg, --slider-tooltip-color, --slider-focus-outline, --slider-thumb-shadow

Switch

• --switch-bg, --switch-bg-active, --switch-thumb-bg, --switch-thumb-bg-active, --switch-fg, --switch-font-family, --switch-focus-outline, --switch-thumb-shadow

Tip: For a full list of variables and their default values, see each component's CSS file. Most variables follow the naming pattern --sc- for global theming and --component- for component-specific overrides.