DOCSEARCHbyAlgolia
Submit Docs

Svelte UX

repository·main·Indexed 22 days ago

https://github.com/techniq/svelte-ux

A comprehensive UI library for Svelte featuring over 200 components, actions, stores, and utilities. Built with Tailwind CSS, it offers extensive customization through theming, variants, and slots. The library includes specialized tools for data visualization (designed to work with LayerChart), complex form handling, hierarchical navigation via TreeList and TableOfContents, and various state management stores like queryParamsStore and mapStore.

Tokens
16.2K
Snippets
79
Records
127
Agent score
77%

What's inside svelte-ux

  1. Overview of Svelte UX

    main

    Svelte UX is a library designed to simplify the creation of highly interactive and visual applications in Svelte. It provides a comprehensive collection of over 200 components, actions, stores, and utilities.

    Key features include:

    • Tailwind-based components: Built with Tailwind CSS for easy styling.
    • Extensibility: Supports theming, variants, granular class overrides, and slots for deep customization.
    • Visualizations: For advanced charting needs, it is designed to work alongside LayerChart, a companion library for composable chart components.

  2. Use ToggleButton to manage mounted/unmounted elements

    main

    The ToggleButton component (introduced in 0.27.15) simplifies use cases where you need to toggle the presence of elements. It includes built-in support for transitions to coordinate the unmounting of children with their exit animations.

    <ToggleButton let:open>
  {#if open}
    <div transition:fade>
      Toggled content
    </div>
  {/if}
</ToggleButton>

  3. Use ButtonGroup with Buttons

    main

    The ButtonGroup component (introduced in 0.27.0) allows grouping multiple Button components.

    • Context: Buttons inside a ButtonGroup can inherit the group's variant unless explicitly overridden on the individual Button (as of 0.27.7).
    • Layout: By default, ButtonGroup uses inline-flex (as of 0.27.6), but you can override this using the class="flex" prop.
    <ButtonGroup variant="outline">
  <Button>Option 1</Button>
  <Button>Option 2</Button>
  <Button variant="text">Option 3</Button>
</ButtonGroup>

  4. Understand Svelte UX theme color categories

    main

    Theme colors are categorized into three main groups:

    1. Semantic Colors: primary, secondary, accent, and neutral.
    2. State Colors: info, success, warning, and danger.
    3. Surface Colors: surface-100 (lightest), surface-200 (medium), and surface-300 (darkest).

    Color Properties:

    • Shades: Semantic and state colors have shades 50-900 (e.g., bg-primary-700). If you only define the base color, the plugin generates these shades.
    • Content Colors: Each semantic/state color has a content color (e.g., text-primary-content) designed for legibility. If not explicitly defined, it is automatically generated as a WCAG-compatible shade.

  10. Initialize and manage theme selection

    main

    To enable theme switching and persistence (via localStorage), you must initialize the theme store in your root +layout.svelte using one of two methods:

    Method 1: Manual Initialization Use settings() combined with the <ThemeInit /> component to handle SSR.

    <script>
  import { settings, ThemeInit } from 'svelte-ux';
  settings();
</script>

<ThemeInit />

    Method 2: Using the Settings Component The <Settings /> component handles <ThemeInit /> internally.

    <script>
  import { Settings } from 'svelte-ux';
</script>

<Settings />

    Theme Switching Components:

    • <ThemeSwitch />: Toggles between the current light and dark themes.
    • <ThemeSelect />: Provides a dropdown to select from all registered themes.

    Programmatic Control: You can access and manipulate the theme using the currentTheme store from getSettings().

    <script>
  import { getSettings } from 'svelte-ux';
  const { currentTheme } = getSettings();

  // Access current theme name
  console.log($currentTheme.theme);

  // Change theme
  function change() {
    currentTheme.setTheme('winter');
  }
</script>

  11. Define and register additional themes

    main

    You can define custom light/dark themes or additional themed variations (e.g., 'winter', 'dracula').

    1. Define in Tailwind: Add the theme object to ux.themes in tailwind.config.cjs. You can include a color-scheme property to explicitly set light or dark.
    2. Register in Svelte UX: Use the settings() function to register these themes so the application knows they exist.

    Important: light and dark must always be the first two themes defined in your settings() call to ensure proper system preference handling.

    Example Configuration:

    // tailwind.config.cjs
ux: {
  themes: {
    light: { "color-scheme": "light", ... },
    dark: { "color-scheme": "dark", ... },
    winter: { "color-scheme": "light", ... }
  }
}
    // +layout.svelte
import { settings } from 'svelte-ux';

settings({
  themes: {
    light: ['light', 'winter'],
    dark: ['dark', 'dracula'],
  },
});

  12. Reference theme colors in Tailwind and CSS

    main

    You can use theme colors in three ways:

    1. Tailwind Classes: Use standard utility classes like bg-primary, text-secondary-content, or apply opacity with bg-primary-600/50.
    2. Tailwind theme() function: Useful for setting CSS variables in <style> blocks or arbitrary values.
    3. CSS Variables: Reference colors directly via var(--color-*). Note that you must wrap the variable in the same color space function used by the Tailwind plugin (e.g., hsl() by default).

    Examples:

    <div class="[--text-color:theme(colors.primary)]" />
<div class="[--text-color:theme(colors.primary/50%)]" />

<style>
  div {
    --text-color: theme(colors.primary);
    --bg-color: theme(colors.primary / 50%);
  }
</style>
    /* Direct CSS variable usage */
.custom-element {
  color: hsl(var(--color-primary));
}