Component field guide

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

LIVE COMPONENT

WelkAccordion

A native details/summary disclosure for progressively revealing content. Click or use the keyboard on its title to toggle it. Set the native open prop to start expanded; nest accordions inside the content to build hierarchies.

The details

A little more to discover.

Usage

React / TSX

import { WelkAccordion } from "@welkui/react";

<WelkAccordion title="The details">A little more to discover.</WelkAccordion>

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

Variants and behavior

vertical: expands below the summary (default).
horizontal: reveals content sideways.
nested: compact styling for disclosures inside another accordion.

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.

Vertical

Default downward disclosure. Starts open here so the layout is visible; click the title to toggle.

Vertical details

Content appears below the summary.

Key propsvariant="vertical" open

Horizontal

Reveals content beside its title rather than below.

Sideways details

Content appears alongside the summary.

Key propsvariant="horizontal" open

Nested

Place a nested disclosure inside a parent to build a content hierarchy.

Parent chapter

Nested chapter

One level deeper.

Key propsvariant="nested"

Outside dismissal

Expand the summary, then click elsewhere on the page to close it.

Click outside to close

Use for temporary supplemental content.

Key propscloseOnOutsideClick fixedWidth={320}

Usage notes and accessibility

Use disclosures for optional detail, FAQs, or content sections. Keep essential actions visible rather than hiding everything behind a summary.
The summary is the toggle: focus it with Tab and activate with Enter or Space. Avoid interactive controls inside the title; place them in the expanded content.
Horizontal layouts need room for both summary and content. Use vertical layouts for dense copy or narrow containers. Nested accordions should have distinct, meaningful titles.

Props

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

WelkAccordion prop reference
Prop	Type	Default	Description
`title`	`ReactNode`	Required	Interactive disclosure heading.
`children`	`ReactNode`	Unset	Content revealed when expanded.
`variant`	`"vertical" \| "horizontal" \| "nested"`	"vertical"	Disclosure layout and appearance.
`closeOnOutsideClick`	`boolean`	false	Closes the disclosure when clicking outside it.
`fixedWidth`	`CSSProperties["width"]`	Unset	Fixed disclosure width, such as 320 or 20rem.
`open`	`boolean`	Native default: false	Native details open state.
`onToggle`	`ReactEventHandler<HTMLDetailsElement>`	Unset	Native disclosure toggle notification.

Native props and refs

Inherits native details props except title, including name, className, style, aria-* and data-*; forwards a details ref.

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.