Solid

SolidJS handles custom elements natively in JSX. The @voidable/ui-solid package provides a useTheme signal.

Install

npm install @voidable/ui @voidable/theme @voidable/ui-solid

Vite config

Add the SolidJS plugin to your Vite config:

import solid from 'vite-plugin-solid';

export default {
  plugins: [solid()],
};

Usage

Use <void-*> elements directly in Solid JSX:

import '@voidable/ui';

function App() {
  return (
    <>
      <void-button variant="filled" onClick={() => console.log('clicked')}>
        Save
      </void-button>

      <void-input placeholder="Your name" />

      <void-alert color="info">
        Custom elements work natively in Solid.
      </void-alert>
    </>
  );
}

Listen to custom events with on: syntax. Cast the event to CustomEvent so TypeScript knows the shape of detail:

<void-input
  on:void-change={(e: CustomEvent<{ value: string }>) => setValue(e.detail.value)}
/>

Theme signal

Track the active theme as a reactive signal:

import { useTheme } from '@voidable/ui-solid';

function ThemeIndicator() {
  const theme = useTheme(); // Accessor<'dark' | 'light'>
  return <span>Current theme: {theme()}</span>;
}

The signal observes the data-theme attribute on <html> via MutationObserver and cleans up via onCleanup.