frontis

Tiny library for building interactive component showcases without pulling in Storybook.

Register a component once, get a shared registry, category nav, and an isolated Leva control panel per showcase — no hand-rolled example map, no per-demo store plumbing.

Install

bun add frontis

react and react-dom are peer dependencies. leva is an optional peer — only needed if you use frontis/react.

Core: the registry

import { defineShowcase, getShowcases, getCategories } from 'frontis';

defineShowcase({
  id: 'button',
  title: 'Button',
  category: 'inputs',
  component: Button,
});

getShowcases(); // every registered showcase, in registration order
getCategories(); // distinct categories, first-seen order

frontis (the core entry) never imports React — a showcase's component stays unknown there. Registering the same id twice warns and overwrites, so hot-reloading a showcase file during dev never crashes.

React: <Showcase> and shared controls

import { Showcase, useSharedControls } from 'frontis/react';

function ButtonDemo() {
  const { label, disabled } = useSharedControls({ label: 'Click me', disabled: false });
  return (
    <Showcase>
      <Button label={label} disabled={disabled} />
    </Showcase>
  );
}

<Showcase> gives each demo its own Leva store, so controls in one showcase never leak into another. useSharedControls merges a base schema with per-showcase overrides on that store and returns the flat values.

Status

Early — the registry and <Showcase>/useSharedControls are in place; source-view (<Source>) and a router are not built yet. See docs/POC.md for the current milestones.

Development

bun install
bun run test
bun run typecheck
bun run build

License

MIT © jayF0x