gentleduck primitives

Internal catalog of available primitives in @gentleduck/primitives

Installation

npm install @gentleduck/primitives
npm install @gentleduck/primitives

Implemented Primitives

Dialog

function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Dialog.Trigger onClick={() => setOpen(true)}>Open</Dialog.Trigger>
      <Dialog.Root open={open} onOpenChange={setOpen}>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>Some content here.</Dialog.Description>
          <Dialog.Close>Close</Dialog.Close>
        </Dialog.Content>
      </Dialog.Root>
    </>
  );
}
function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Dialog.Trigger onClick={() => setOpen(true)}>Open</Dialog.Trigger>
      <Dialog.Root open={open} onOpenChange={setOpen}>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>Some content here.</Dialog.Description>
          <Dialog.Close>Close</Dialog.Close>
        </Dialog.Content>
      </Dialog.Root>
    </>
  );
}

Popover

function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <Popover.Root open={open} onOpenChange={setOpen}>
      <Popover.Trigger>Toggle</Popover.Trigger>
      <Popover.Content>
        <p>Popover content</p>
      </Popover.Content>
    </Popover.Root>
  );
}
function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <Popover.Root open={open} onOpenChange={setOpen}>
      <Popover.Trigger>Toggle</Popover.Trigger>
      <Popover.Content>
        <p>Popover content</p>
      </Popover.Content>
    </Popover.Root>
  );
}

Tooltip

<Tooltip.Root>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Content>Tooltip text</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Content>Tooltip text</Tooltip.Content>
</Tooltip.Root>

Slider

<Slider.Root defaultValue={[50]} max={100} step={1}>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>
<Slider.Root defaultValue={[50]} max={100} step={1}>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>

Other Primitives

  • @gentleduck/primitives/drawer → Dismissible panel (WIP)
  • @gentleduck/primitives/sheet → Full-width/height surface
  • @gentleduck/primitives/navigation-menu → Navigation menu (WIP)
  • @gentleduck/primitives/mount → Mount/unmount helpers
  • @gentleduck/primitives/slot → Composition utility
  • @gentleduck/primitives/checkers → Conditional behavior helpers
Gentleduck VimGentleduck Libs