Welkplain
Horizontal plain separator at the default thickness.
Key props
variant="plain"Component field guide
Explore live variants, compare states, and learn every prop. Pick a component to start.
WelkDivider
A semantic separator with a slightly irregular comic line. Horizontal dividers span their container; give vertical dividers an appropriate height through style or the surrounding layout.
Usage
import { WelkDivider } from "@welkui/react";
<WelkDivider variant="dashed" thickness={3} />Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.
Variants and behavior
- plain: solid line (default).
- dotted: dotted separator.
- dashed: dashed separator.
- Orientations: horizontal (default), vertical.
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.
dotted
Horizontal dotted separator at the default thickness.
Key props
variant="dotted"dashed
Horizontal dashed separator at the default thickness.
Key props
variant="dashed"Vertical
Use explicit height to separate adjacent content.
BeforeAfter
Key props
orientation="vertical" style={{ height: 64 }}Thick line
Increase the positive pixel thickness for a stronger visual break.
Key props
thickness={5}Usage notes and accessibility
- Use separators to group related content, not as a replacement for headings. Their semantic role conveys a boundary between sections.
- A vertical divider needs a height from style or its layout. thickness must be a finite positive pixel value; zero, negative and non-finite values throw.
- Plain, dotted and dashed patterns are visual choices rather than status indicators. Use spacing as well as a line to keep dense layouts readable.
Props
Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Separator direction and aria-orientation. |
variant | "plain" | "dotted" | "dashed" | "plain" | Line pattern. |
thickness | number | 2 | Finite positive line thickness in pixels. |
Native props and refs
Inherits native div attributes except children; forwards a div 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.