WelkUI!REACT EDITION

Component field guide

Explore live variants, compare states, and learn every prop. Pick a component to start.

LIVE COMPONENT

WelkDrawer

A controlled native modal panel that slides in from an edge with comic motion. It contains focus, locks body scrolling, and restores focus after closing. onClose requests a parent state update; closing keeps the panel mounted briefly for its exit animation.

Mission control

Your settings go here.

Usage

React / TSX
import { useState } from "react";
import { WelkButton, WelkDrawer } from "@welkui/react";

const [open, setOpen] = useState(false);

<WelkButton onClick={() => setOpen(true)}>Open drawer</WelkButton>
<WelkDrawer open={open} onClose={() => setOpen(false)}
  title="Mission control" position="right" closeOnTapOutside>
  Your settings go here.
</WelkDrawer>

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

  • right: right-edge panel (default).
  • left: left-edge panel.
  • top: top-edge panel.
  • bottom: bottom-edge panel.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

left

Open the left-edge drawer. Escape, the backdrop, and Done all dismiss this example.

left drawer

This panel enters from the left edge. Focus stays inside until you close it.

Key propsposition="left" closeOnTapOutside

right

Open the right-edge drawer. Escape, the backdrop, and Done all dismiss this example.

right drawer

This panel enters from the right edge. Focus stays inside until you close it.

Key propsposition="right" closeOnTapOutside

top

Open the top-edge drawer. Escape, the backdrop, and Done all dismiss this example.

top drawer

This panel enters from the top edge. Focus stays inside until you close it.

Key propsposition="top" closeOnTapOutside

bottom

Open the bottom-edge drawer. Escape, the backdrop, and Done all dismiss this example.

bottom drawer

This panel enters from the bottom edge. Focus stays inside until you close it.

Key propsposition="bottom" closeOnTapOutside

Usage notes and accessibility

  • Use edge panels for contextual navigation, filters or supporting tools. The current drawer is modal; the rest of the page is unavailable while it is open.
  • Keep open in parent state and set it false in onClose. Closing plays an exit animation before the native modal is removed; motion preferences are respected.
  • Try Tab and Escape after opening. Focus stays in the panel, body scrolling is locked, and focus returns to the previous target on close.
  • Use top or bottom for broad content and left or right for side panels. Backdrop dismissal is opt-in; provide an explicit close path for every configuration.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

WelkDrawer prop reference
PropTypeDefaultDescription
openbooleanRequiredControlled visibility. Set false when dismissal is requested.
onClose() => voidRequiredDismissal callback; the parent must update open.
titleReactNodeRequiredVisible title and accessible dialog name.
childrenReactNodeUnsetPanel content.
closeOnTapOutsidebooleanfalseAllows dismissal by pressing and releasing on the backdrop.
classNamestringUnsetAdditional CSS class on the component root.
position"left" | "right" | "top" | "bottom""right"Entry edge and panel placement.
closeLabelstring"Close drawer"Accessible name for the close button.

This component supports the props listed above, not arbitrary native HTML attributes.

Project setup, styling and Next.js

Import @welkui/react/styles.css once in your app entry or Next.js root layout. The previews use the default theme; override --welk-* CSS tokens in your app to customize it.

For Next.js, put hooks and event handlers in a component beginning with "use client". Keep state local to the component using the control. The library preserves its client boundaries and uses your installed React version.

Use defaultValue or defaultChecked for uncontrolled fields, or a state value and its change callback for controlled fields. Do not switch between these modes during the lifetime of a field.

Modal and notification examples start closed: use their Try buttons to see them. Disabled examples are deliberately non-interactive. Validate forms, uploads, authentication, and server responses in your application; these components only provide UI.