ventana-demo.mov

Ventana

A fun unstyled spring motion driven popover component for React

Installation · Usage · Components · Acknowledgements · License

Introduction

Ventana is a fun unstyled spring motion driven popover component for React. Built using Radix's Popover Primitive and inspired by the following video.

Installation

Installing Ventana with npm:

npm install @ventana/react

Installing Ventana with yarn:

yarn add @ventana/react

Installing Ventana with pnpm:

pnpm add @ventana/react

Basic Usage

To implement Ventana in your application, use the following:

import { Ventana } from '@ventana/react';

function Component() {
  return (
    <Ventana.Root>
      <Ventana.Trigger>Open</Ventana.Trigger>
      <Ventana.Portal>
        <Ventana.Content>
          <Ventana.Tab />
          <Ventana.Item>
            <h1>Item 1</h1>
          </Ventana.Item>
          <Ventana.Item>
            <h1>Item 2</h1>
          </Ventana.Item>
          <Ventana.Item>
            <h1>Item 3</h1>
          </Ventana.Item>
        </Ventana.Content>
      </Ventana.Portal>
    </Ventana.Root>
  );
}

Components

The majority of the components in Ventana are wrappers around the Radix Popover Primitive and inherit the same props. The API documentation for the Radix Popover Primitive can be found here.

Styling is extremely easy with Ventana as it is unstyled by default. Simply pass in your own styles to the components and you're good to go!

Root

The Root component is the root component of the Ventana component and contains all parts of the Popover and also provides context to its children.

Radix Popover Root Props

Trigger

The button that toggles the popover. By default, the Popover.Content will position itself against the trigger.

Radix Popover Trigger Props

Portal

Portals the content of the popover to the body of the document.

Radix Popover Portal Props

Content

The content of the popover. By default, the Popover.Content will position itself against the trigger.

Radix Popover Content Props

Tab

A visual indicator of the selected item in the Popover.

Props TBD

Item

An item in the Popover.

Props TBD