)}
)
}
```
--------------------------------
### Install Dismissible Utility
Source: https://corvu.dev/docs/utilities/dismissible
Install the dismissible utility using npm.
```bash
npm install solid-dismissible
```
--------------------------------
### Install All Corvu UI Primitives
Source: https://corvu.dev/docs/installation
Install the main Corvu package to include all primitives. Your bundler will tree-shake unused components.
```bash
npm install corvu
```
--------------------------------
### Install Resizable Package
Source: https://corvu.dev/docs/primitives/resizable
Install the Resizable primitive using npm. It is also available within the main 'corvu' package.
```bash
npm install @corvu/resizable
```
--------------------------------
### Full Calendar Example with Navigation and Formatting
Source: https://corvu.dev/docs/primitives/calendar
A comprehensive example demonstrating a single-mode calendar with custom navigation, date labels, and cell rendering. Includes date formatting utilities.
```javascript
import { CaretLeft, CaretRight } from '@examples/primitives/calendar/icons'
import Calendar from '@corvu/calendar'
import { Index } from 'solid-js'
import type { VoidComponent } from 'solid-js'
const CalendarExample: VoidComponent = () => {
return (
)
}
const { format: formatWeekdayLong } = new Intl.DateTimeFormat('en', {
weekday: 'long',
})
const { format: formatWeekdayShort } = new Intl.DateTimeFormat('en', {
weekday: 'short',
})
const { format: formatMonth } = new Intl.DateTimeFormat('en', {
month: 'long',
})
export default CalendarExample
```
--------------------------------
### Basic Drawer Implementation
Source: https://corvu.dev/docs/primitives/drawer
A simple example of how to implement a basic drawer. Ensure the necessary Tailwind CSS classes are applied for styling and transitions.
```html
Drawer Title
This is the content of the drawer.
```
--------------------------------
### Full Example: Hoisting Resizable Context for Collapse/Expand
Source: https://corvu.dev/docs/primitives/resizable
This example shows a complete implementation of hoisting the Resizable context. It includes a button within the wrapper component to collapse or expand the first panel, demonstrating practical control from outside the Resizable structure.
```typescript
import { Show, type VoidComponent } from 'solid-js'
import {
SidebarSimpleBold,
SidebarSimpleFill,
} from '@examples/primitives/resizable/icons'
import clsx from 'clsx'
import Resizable from '@corvu/resizable'
const ResizableWrapper = (props: object) => {
const context = Resizable.useContext()
const isCollapsed = () => context.sizes()[0] === 0
return (
<>
)
}
const ResizableHoistingExample: VoidComponent = () => {
return (
{(props) => (
<>
Sidepanel
)}
)
}
export default ResizableHoistingExample
```
--------------------------------
### Install prevent-scroll
Source: https://corvu.dev/docs/utilities/prevent-scroll
Install the 'solid-prevent-scroll' package using npm.
```bash
npm install solid-prevent-scroll
```
--------------------------------
### Persistent Drawer Example with Styling and Imports
Source: https://corvu.dev/docs/primitives/drawer
A comprehensive example showcasing a persistent drawer with detailed styling, event handling, and necessary imports for a functional UI. It includes overlay and content styling, along with a persistent input field.
```jsx
import createPersistent from 'solid-persistent'
import Drawer from '@corvu/drawer'
import type { VoidComponent } from 'solid-js'
const DrawerPersistentExample: VoidComponent = () => {
const persistedContent = createPersistent(DrawerContent)
return (
{(props) => (
<>
Persistent content example
Open Drawer
{persistedContent()}
)}
)
}
const DrawerContent = () => (
<>
Persistent drawer content
This drawer will preserve the state inside the content,
even after it gets unmounted from the DOM.
Enter something in the input and reopen the drawer.
💡 I'm an uncontrolled input, preserving my state because I never
rerender!
)
export default DrawerPersistentExample
```
--------------------------------
### Install Accordion
Source: https://corvu.dev/docs/primitives/accordion
Install the Accordion primitive using npm. It is also available within the main 'corvu' package.
```bash
npm install @corvu/accordion
```
--------------------------------
### Dynamic Content Height Drawer Example
Source: https://corvu.dev/docs/primitives/drawer
This example demonstrates a drawer where the height adjusts to its content, suitable for dynamic content like comments. It uses Solid.js and the Corvu Drawer component.
```typescript
import { For, type VoidComponent } from 'solid-js'
import Drawer from '@corvu/drawer'
const DrawerCommentsExample: VoidComponent = () => {
return (
{(props) => (
<>
Comments example
Open Drawer
Comments
{() => (
Username
This is a comment
)}
Comments Footer
)}
)
}
export default DrawerCommentsExample
```
--------------------------------
### Install a Specific Corvu UI Primitive
Source: https://corvu.dev/docs/installation
Use this command to install individual UI primitives like the drawer component.
```bash
npm install @corvu/drawer
```
--------------------------------
### Install Popover Package
Source: https://corvu.dev/docs/primitives/popover
Install the Popover component using npm. It is also available within the main 'corvu' package.
```bash
npm install @corvu/popover
```
--------------------------------
### Full Drawer Snap Point Example
Source: https://corvu.dev/docs/primitives/drawer
A comprehensive example of a SolidJS Drawer component utilizing snap points. It includes custom styling, animations, and dynamic display of the current snap percentage. Ensure Tailwind CSS is configured for styling.
```jsx
import Drawer from '@corvu/drawer'
import type { VoidComponent } from 'solid-js'
const DrawerSnapPointExample: VoidComponent = () => {
return (
{(props) => (
<>
Snappoints example
Open Drawer
I'm a drawer!
I will snap at 50% of my height.{' '}
My current height is:{' '}
{(props.openPercentage * 100).toFixed(2)}%
)}
)
}
export default DrawerSnapPointExample
```
--------------------------------
### Drawer with Scrollable Content Example
Source: https://corvu.dev/docs/primitives/drawer
Demonstrates a Drawer component that correctly handles user interaction with scrollable content inside. This example shows how to implement a drawer with a list that can be scrolled.
```typescript
import { For, type VoidComponent } from 'solid-js'
import clsx from 'clsx'
import Drawer from '@corvu/drawer'
const DrawerScrollableExample: VoidComponent = () => {
return (
{(props) => (
<>
Scrollable example
Open Drawer
Drawer with a scrollable element
{(_, idx) => (
List item {idx() + 1}
)}
)}
)
}
export default DrawerScrollableExample
```
--------------------------------
### Install Tooltip Package
Source: https://corvu.dev/docs/primitives/tooltip
Install the Corvu Tooltip package using npm. It is also available within the main corvu package.
```bash
npm install @corvu/tooltip
```
--------------------------------
### Full Persistent Dialog Example with Styling
Source: https://corvu.dev/docs/primitives/dialog
This comprehensive example shows how to implement a persistent dialog with detailed content, including labels, descriptions, an input field, and custom Tailwind CSS classes for styling. It utilizes `createPersistent` to ensure the input's state is maintained.
```jsx
import createPersistent from 'solid-persistent'
import Dialog from '@corvu/dialog'
import type { VoidComponent } from 'solid-js'
const PersistentDialogExample: VoidComponent = () => {
const persistedContent = createPersistent(DialogContent)
return (
)
}
const DialogContent = () => (
<>
Persistent dialog content
This dialog will preserve the state inside the content,
even after it gets unmounted from the DOM.
Enter something in the input and reopen the dialog.
💡 I'm an uncontrolled input, preserving my state because I never
rerender!
)
export default PersistentDialogExample
```
--------------------------------
### Install Corvu Calendar
Source: https://corvu.dev/docs/primitives/calendar
Install the Corvu Calendar component using npm. It can also be imported from the main 'corvu' package.
```bash
npm install @corvu/calendar
```
--------------------------------
### Collapsible Resizable Panel Example
Source: https://corvu.dev/docs/primitives/resizable
Demonstrates a collapsible panel with custom minimum and collapsed sizes. It displays the current size and collapsed state.
```typescript
import Resizable from '@corvu/resizable'
import type { VoidComponent } from 'solid-js'
const ResizableCollapsibleExample: VoidComponent = () => {
return (
)
}
export default ResizableCollapsibleExample
```
--------------------------------
### Responsive Drawer/Dialog Example
Source: https://corvu.dev/docs/primitives/drawer
Combines Drawer and Dialog primitives for responsive behavior. Uses `createMediaQuery` to detect desktop viewport. Renders a `Drawer` on mobile and a `Dialog` on desktop. Ensure `createMediaQuery` is imported.
```typescript
import createMediaQuery from '@examples/primitives/drawer/responsive/createMediaQuery'
import Dialog from '@corvu/dialog'
import Drawer from '@corvu/drawer'
import { Show } from 'solid-js'
import type { VoidComponent } from 'solid-js'
const DrawerResponsiveExample: VoidComponent = () => {
const isDesktop = createMediaQuery('(min-width: 768px)')
const MobileDrawer = () => (
{(props) => (
<>
Edit Profile
Edit Profile
Make changes to your profile here
Username
Cancel
Submit
)}
)
return (
}>
)
}
export default DrawerResponsiveExample
```
--------------------------------
### Install Disclosure Component
Source: https://corvu.dev/docs/primitives/disclosure
Install the Disclosure component using npm. It is also available within the main 'corvu' package.
```bash
npm install @corvu/disclosure
```
--------------------------------
### Create Single Select List
Source: https://corvu.dev/docs/utilities/list
Example of creating a single select list for search results using `createList`. It handles keyboard navigation and selection.
```javascript
const Search = () => {
const [results, setResults] = createSignal([])
const { active, setActive, onKeyDown } = createList({
items: () => results().map(result => result.id), // required
initialActive: null, // default, T | null
orientation: 'vertical', // default, 'vertical' | 'horizontal'
loop: true, // default
textDirection: 'ltr', // default, 'ltr' | 'rtl'
handleTab: false, // default = true
vimMode: false, // default
onActiveChange: (active) => {} // optional callback to handle changes
})
return (
<>
{(item, index) => (
{result.name}
)}
)
}
```
--------------------------------
### Install Dialog Package
Source: https://corvu.dev/docs/primitives/dialog
Install the Corvu Dialog package using npm. It is also available within the main 'corvu' package.
```bash
npm install @corvu/dialog
```
--------------------------------
### Install OTP Field
Source: https://corvu.dev/docs/primitives/otp-field
Install the OTP Field package using npm. It is also available within the main 'corvu' package.
```bash
npm install @corvu/otp-field
```
--------------------------------
### Basic Dialog Example with Dismissible
Source: https://corvu.dev/docs/utilities/dismissible
A basic dialog component using the Dismissible utility to manage its open state and dismiss on interaction.
```javascript
import Dismissible from 'solid-dismissible'
const DialogContent: Component < {
open: boolean
setOpen: (open: boolean) => void
} > = (props) => {
const [contentRef, setContentRef] = createSignal(null)
return (
setOpen(false)}>
Dialog
)
}
```
--------------------------------
### Nested Dialog Example
Source: https://corvu.dev/docs/primitives/dialog
Demonstrates how to implement nested dialogs using the Corvu Dialog component. This example shows a main dialog that can open another dialog within it. Corvu handles dismissal of only the top-most dialog.
```jsx
import Dialog from '@corvu/dialog'
import type { VoidComponent } from 'solid-js'
const DialogExample: VoidComponent = () => {
return (
)
}
export default DialogExample
```
--------------------------------
### Popover Anatomy Example
Source: https://corvu.dev/docs/primitives/popover
Illustrates the basic structure and component hierarchy of a Popover, including Anchor, Trigger, Portal, Overlay, Content, Arrow, Close, Label, and Description.
```html
```
--------------------------------
### Integrating Popover with Calendar Focus
Source: https://corvu.dev/docs/primitives/calendar
This example shows how to use the `focusedDayRef` with the `initialFocusEl` prop of a Popover component to ensure the calendar grid receives focus when the Popover opens.
```javascript
By passing `focusedDayRef` as the `initialFocusEl` prop to the Popover, we can make it focus the calendar grid when it opens!
```
--------------------------------
### Drawer with Transition Resize Enabled
Source: https://corvu.dev/docs/primitives/drawer
This example shows a Drawer component with the `transitionResize` property enabled. It includes a button to dynamically change the content's height, triggering the transition. Ensure `transition-property: height` is set on the drawer content for the effect to work.
```typescript
import { createSignal, type VoidComponent } from 'solid-js'
import Drawer from '@corvu/drawer'
const heightSequence = [500, 400, 300, 400]
const DrawerTransitionResizeExample: VoidComponent = () => {
const [currentHeight, setCurrentHeight] = createSignal(400)
return (
{(props) => (
<>
Transition resize example
Open Drawer
Dynamic content height example
I will transition between height changes