Components
8 components available
'use client';
import { useState } from 'react';
interface BottomSheetProps {
isOpen: boolean;
onClose: () => void;
}
const BottomSheet = ({ isOpen, onClose }: BottomSheetProps) => {
const [isDragging, setIsDragging] = useState(false);
const [offset, setOffset] = useState(0);
const handleDrag = (e: React.TouchEvent<HTMLDivElement> | ReBottomSheet
BottomSheet
Overlays
react
'use client';
import { useState } from 'react';
interface PopoverProps {
title: string;
content: string;
actionText: string;
}
const Popover: React.FC<PopoverProps> = ({ title, content, actionText }) => {
const [isOpen, setIsOpen] = useState(false);
const handleToggle = () => {
setIsOpen(!isOpen);
};
const handleClose = () =>Popover
Popover
Overlays
react
'use client';
import React, { useState } from 'react';
interface TooltipProps {
children: React.ReactNode;
content: string;
direction?: 'top' | 'bottom' | 'left' | 'right';
}
const Tooltip: React.FC<TooltipProps> = ({ children, content, direction = 'top' }) => {
const [show, setShow] = useState(false);
const [x, setX] = useState(0);
Tooltip
Tooltip
Overlays
react
'use client';
import { useState, useEffect } from 'react';
interface Command {
id: number;
title: string;
description: string;
}
const commands: Command[] = [
{ id: 1, title: 'New File', description: 'Create a new file' },
{ id: 2, title: 'Open File', description: 'Open an existing file' },
{ id: 3, title: 'Save File', description: 'CommandPalette
CommandPalette
Overlays
react
'use client';
import React, { useState } from 'react';
interface AlertDialogProps {
isOpen: boolean;
onClose: () => void;
onConfirm: () => void;
title: string;
description: string;
}
const AlertDialog: React.FC<AlertDialogProps> = ({
isOpen,
onClose,
onConfirm,
title,
description,
}) => {
if (!isOpen) return null;
const AlertDialog
AlertDialog
Overlays
react
PRO
ContextMenu
Overlays
react
PRO
ToastNotification
Overlays
react
PRO
SlideDrawer
Overlays
react