@gemologic/sheen

Accessible, themeable SolidJS components for application interfaces. Import the component entry that matches the feature set you use, plus @gemologic/sheen/styles.css and the selected token CSS from @gemologic/sheen-tokens.

Install

pnpm add @gemologic/sheen @gemologic/sheen-tokens [email protected]

Add the runtime setup plugin to Vite 8 or SolidStart's Vite configuration:

import { sheenRuntime } from "@gemologic/sheen/vite";

export default { plugins: [sheenRuntime(), /* your Solid/SolidStart plugin */] };

Sheen ships its patched browser DOM renderer and overlay backend. The plugin directs browser solid-js/web imports to that renderer and deduplicates the application's ordinary Solid core. SSR uses the peer server renderer and its matching request storage, including through Sheen's Node/worker renderer exports. No Kobalte dependency or consumer patches are needed. Keep solid-js in your app dependencies for JSX, signals, stores, and routing. Do not mix original Kobalte overlays into Sheen's layer stack. Other bundlers need a qualified setup adapter.

Load the styles once at the application root:

@import "@gemologic/sheen-tokens/fonts.css";
@import "@gemologic/sheen-tokens/themes.css";
@import "@gemologic/sheen-tokens/core.css";
@import "@gemologic/sheen/styles.css";

Use

import { Button, ThemeProvider } from "@gemologic/sheen";

export function App() {
  return <ThemeProvider><Button>Continue</Button></ThemeProvider>;
}

Fresh providers default to dark Obsidian with a jade accent. Import ./core, ./forms, ./overlays, or ./navigation when an application needs a deliberately narrower entry. Server markup, hydration, contextual portals, focus, and retained-refresh behavior are public contracts, not client-only enhancements.

See the Sheen repository, hydration guide, and component inventory for complete examples and support policy.