HorizontalRule

Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**

<script lang="ts">
  import { createHorizontalRule } from '@kumiki/headless/horizontal-rule';
  const ctl = createHorizontalRule({});
</script>

<div {@attach ctl.root}>
  <!-- your markup -->
</div>

Compound components (<Root> / <Trigger> / …). Markup is fixed; styling is not. Same trade-off as a typical headless UI library.

pnpm add @kumiki/components

<HorizontalRule.Root />

<HorizontalRule.Root orientation="vertical" />

Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.

pnpm add @kumiki/atelier

<script lang="ts">
  import { Tailwind as HR } from '@kumiki/atelier/horizontal-rule';
</script>

<section>…</section>
<HR.Root />
<section>…</section>

<!-- Vertical orientation (renders as a div with role=separator): -->
<HR.Root orientation="vertical" />