Components — Modern React UI Library

Examples

Basic Prop Merging

Slot passes its props down to the child element, merging className and event handlers.

Basic

This text inherits the className from Slot

import { Slot } from "@g4rcez/components/core/slot";

function BasicMerging() {
  return (
    <Slot className="font-bold text-primary">
      <span>This text inherits the className from Slot</span>
    </Slot>
  );
}

Event Handler Composition

Both the Slot and child onClick handlers fire when the element is clicked.

Event composition

import { Slot } from "@g4rcez/components/core/slot";

function EventComposition() {
  return (
    <Slot onClick={() => console.log("Slot handler")}>
      <button
        type="button"
        onClick={() => console.log("Button handler")}
        className="rounded px-4 py-2 bg-primary text-primary-foreground"
      >
        Click (both handlers fire)
      </button>
    </Slot>
  );
}

Custom Slot via createSlot

createSlot creates a named Slot for use as an asChild pattern in component primitives.

createSlot

import { createSlot } from "@g4rcez/components/core/slot";

const ButtonSlot = createSlot("Button");

function CustomSlot() {
  return (
    <ButtonSlot
      className="rounded px-4 py-2 bg-primary text-primary-foreground"
      aria-label="Custom button slot"
    >
      <button type="button">Composed button</button>
    </ButtonSlot>
  );
}

When to use Slot

Use when

You need the documented Slot interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Slot behavior you need.

Accessibility

Keep the Slot labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.