@aaroh/svelte-ui

Accessible, themeable Svelte utilities powered by the Aaroh design system.

27 props-builder functions that compute class names and HTML attributes for you to spread onto native elements. All visuals come from @aaroh/ui — themes switch with a single CSS import.

Installation

npm install @aaroh/svelte-ui @aaroh/ui

Setup

Import a theme and component CSS in your app entry or layout:

// src/routes/+layout.svelte or src/app.ts
import '@aaroh/ui/themes/heritage';
import '@aaroh/ui/components/button';
import '@aaroh/ui/components/input';
import '@aaroh/ui/components/card';

SvelteKit Setup

In SvelteKit, import CSS in your root layout:

<!-- src/routes/+layout.svelte -->
<script>
  import '@aaroh/ui/themes/heritage';
  import '@aaroh/ui/components/button';
  import '@aaroh/ui/components/input';
  import '@aaroh/ui/components/card';
</script>

<slot />

The Props-Builder Pattern

Unlike traditional component libraries, @aaroh/svelte-ui exports functions — not components. Each function returns an object of attributes (class, aria-*, disabled, etc.) that you spread onto native HTML elements.

This gives you full control over your markup while getting computed accessibility attributes and class names for free.

<script>
  import { buttonProps } from '@aaroh/svelte-ui';

  const attrs = buttonProps({ variant: 'solid', size: 'md', hasChildren: true });
</script>

<button {...attrs}>Get Started</button>

Why this pattern?

• No Svelte compiler needed at build — the package is pure TypeScript
• Full control over your markup — you own the <button>, not a wrapper
• Composable — combine with your own classes, event handlers, transitions
• SSR-safe — the functions are pure and work in any environment
• Svelte 5 runes-friendly — works with $derived for reactive props

Quick Example

<script>
  import { buttonProps, inputProps, cardProps } from '@aaroh/svelte-ui';

  let email = $state('');

  const card = cardProps({ variant: 'elevated', size: 'md' });
  const input = inputProps({ size: 'md', label: 'Email' });
  const submitBtn = buttonProps({ variant: 'solid', size: 'md', hasChildren: true });
  const cancelBtn = buttonProps({ variant: 'ghost', size: 'md', hasChildren: true });
</script>

<div {...card}>
  <input
    {...input}
    type="email"
    placeholder="[email protected]"
    bind:value={email}
  />
  <button {...submitBtn}>Sign Up</button>
  <button {...cancelBtn}>Cancel</button>
</div>

All 27 Props Builders

| Function | For Component | | --------------------- | ------------- | | accordionProps() | Accordion | | aiProps() | AI Chat | | animationProps() | Animation | | avatarProps() | Avatar | | badgeProps() | Badge | | buttonProps() | Button | | cardProps() | Card | | carouselProps() | Carousel | | checkboxProps() | Checkbox | | dashboardProps() | Dashboard | | drawerProps() | Drawer | | dropdownMenuProps() | Dropdown Menu | | ecommerceProps() | E-Commerce | | formsProps() | Forms | | inputProps() | Input | | mediaProps() | Media | | modalProps() | Modal | | progressProps() | Progress | | radioProps() | Radio | | selectProps() | Select | | skeletonProps() | Skeleton | | socialProps() | Social | | switchProps() | Switch | | tabsProps() | Tabs | | textareaProps() | Textarea | | toastProps() | Toast | | tooltipProps() | Tooltip |

Spreading Attributes

The returned objects contain everything the native element needs:

<script>
  import { buttonProps } from '@aaroh/svelte-ui';

  // Returns: { class, type, disabled, 'aria-disabled', 'aria-busy', 'aria-label' }
  const attrs = buttonProps({
    variant: 'outline',
    size: 'lg',
    color: 'destructive',
    loading: true,
    hasChildren: true,
  });
</script>

<!-- Spread gives you: class="aaroh-btn ..." type="button" aria-busy="true" disabled -->
<button {...attrs}>Deleting...</button>

You can add your own attributes alongside the spread:

<button {...attrs} onclick={handleClick} id="my-button">
  Click Me
</button>

Reactive Props with Svelte 5 Runes

Use $derived to recompute attributes reactively:

<script>
  import { buttonProps } from '@aaroh/svelte-ui';

  let loading = $state(false);

  const attrs = $derived(
    buttonProps({
      variant: 'solid',
      size: 'md',
      loading,
      hasChildren: true,
    })
  );

  async function handleSubmit() {
    loading = true;
    await submitForm();
    loading = false;
  }
</script>

<button {...attrs} onclick={handleSubmit}>Submit</button>

Icons

Use the resolveIconSvg helper to render icon SVGs:

<script>
  import { buttonProps, resolveIconSvg } from '@aaroh/svelte-ui';
  import { rosetteIcon } from '@aaroh/ui';

  const attrs = buttonProps({
    variant: 'ghost',
    icon: rosetteIcon,
    ariaLabel: 'Menu',
    hasChildren: false,
  });

  const iconSvg = resolveIconSvg(rosetteIcon);
</script>

<button {...attrs}>
  {#if iconSvg}
    <span class="aaroh-btn-motif" aria-hidden="true">{@html iconSvg}</span>
  {/if}
</button>

Theming

Same CSS-import approach as all Aaroh UI packages:

<script>
  // Swap this import to change themes
  import '@aaroh/ui/themes/modern';
</script>

Runtime switching:

<script>
  import { applyTheme, removeTheme, heritage, modern } from '@aaroh/ui';
  import { buttonProps } from '@aaroh/svelte-ui';

  let handle = $state(null);

  function switchTheme(theme) {
    if (handle) removeTheme(handle);
    handle = applyTheme(document.documentElement, theme);
  }
</script>

<button {...buttonProps({ variant: 'solid', hasChildren: true })} onclick={() => switchTheme(heritage)}>
  Heritage
</button>
<button {...buttonProps({ variant: 'outline', hasChildren: true })} onclick={() => switchTheme(modern)}>
  Modern
</button>

SvelteKit Compatibility

@aaroh/svelte-ui is fully SSR-safe:

• Props builders are pure functions — no DOM access
• Works in +page.svelte, +layout.svelte, and +page.server.ts contexts
• CSS imports are handled by Vite's CSS pipeline
• Compatible with SvelteKit's prerendering and static adapter

Svelte Compatibility

• Svelte 5 — full runes support ($state, $derived, $effect)
• Svelte 4 — works with reactive declarations ($:)
• SvelteKit — SSR, prerendering, all adapters
• Vite — zero-config

TypeScript

Full types ship with the package:

import type { ButtonProps, ButtonAttributes } from '@aaroh/svelte-ui';
import type { InputProps, CardProps } from '@aaroh/svelte-ui';

Peer Dependencies

• svelte >= 5.0.0

License

MIT © Quilonix