Vibes logo

Modal

Installation

Run the following command

npx vibes@latest add modal

Usage

'use client';import { useState } from 'react';import { Modal } from '@/vibes/soul/primitives/modal';function Usage() {    const [isOpen, setIsOpen] = useState(true);  return (      <Modal          isOpen={isOpen}          setOpen={setIsOpen}          title="Example modal"          trigger={<button>Open Modal</button>}      >          <p>Put your content here!</p>      </Modal>  );}

API Reference

This component uses the Dialog component from Radix UI. Refer to the Radix UI Dialog documentation for more information.

ModalProps

PropTypeDefault
isOpen*
boolean
setOpen*
(open: boolean) => void
title*
string
trigger*
ReactNode
children*
ReactNode

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --modal-background: var(--background);  --modal-overlay-background: color-mix(in oklab, var(--foreground) 50%, transparent);}