@fictjs/primitive

Low-level polymorphic DOM element components for Fict, modeled after @radix-ui/react-primitive. Every other primitive renders through these to get consistent asChild and ref-forwarding behavior.

Part of ui-primitives, a port of Radix Primitives to Fict.

Installation

pnpm add @fictjs/primitive fict

Usage

/** @jsxImportSource fict */
import { Primitive } from '@fictjs/primitive'

// Renders a <button>
export function Button(props) {
  return <Primitive.button {...props} />
}

// `asChild` merges the primitive's behavior onto the child element instead of rendering its own node
export function LinkButton() {
  return (
    <Primitive.button asChild>
      <a href="/home">Home</a>
    </Primitive.button>
  )
}

API

• Primitive.<tag> — one component per supported element (a, button, div, form, h2, h3, img, input, label, li, nav, ol, p, select, span, svg, ul). Each accepts the element's props plus asChild and a ref.
• Primitive.Root (Root) — alias for the full Primitive object.
• dispatchDiscreteCustomEvent(target, event) — dispatch a discrete custom DOM event.

Exports

• Components: Primitive, Root, dispatchDiscreteCustomEvent.
• Types: PrimitivePropsWithRef.

Documentation

The API mirrors @radix-ui/react-primitive. See the ui-primitives overview and the architecture guide for the Fict-specific reactivity model.

License

MIT © Fict contributors.