Components
- Accordion
- Action BarUpdated
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- BadgeUpdated
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- CalendarUpdated
- CardUpdated
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context MenuUpdated
- Data List
- Date Picker
- DialogUpdated
- DrawerUpdated
- Editable
- FieldUpdated
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- MarqueeUpdated
- Menu
- Native Select
- Number InputUpdated
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- TableUpdated
- Tabs
- Textarea
- TimerUpdated
- ToastUpdated
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Hooks
Installation#
pnpm dlx shadcn@latest add @shark/presence
Usage#
import React from "react"; import { Presence } from "@/registry/react/components/presence"; const [visible, setVisible] = React.useState(false); <Presence present={visible}> Content that animates in and out </Presence>
Lazy#
Setting lazyMount and unmountOnExit to true lazy mounts and unmounts the content.
It will remove the element from the DOM when it is not present.
<Presence lazyMount unmountOnExit {...}> {/** content */} </Presence>
States#
Presence automatically manages the attribute data-state to open and closed. This enables styling and animations based on visibility state.
<Presence present={true} /> // <div data-state="open" /> <Presence present={false} /> // <div data-state="closed" />
API Reference#
Presence#
| Prop | Type | Default |
|---|---|---|
present | boolean | false |
unmountOnExit | boolean | true |
lazyMount | boolean | true |
asChild | boolean | false |
For a complete list of props, see the Ark UI documentation.