Separator

Visually or semantically separates content.

Qwik UI

An open-source UI component library.

Customizable

Accessible

Optimized for you

import { component$ } from '@builder.io/qwik';
import { Separator } from '~/components/ui';
export default component$(() => {
  return (
    <div>
      <div class="space-y-1">
        <h4 class="text-sm font-medium leading-none">Qwik UI</h4>
        <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
      </div>
      <Separator class="my-4" />
      <div class="flex h-5 items-center space-x-4 text-sm">
        <div>Customizable</div>
        <Separator orientation="vertical" />
        <div>Accessible</div>
        <Separator orientation="vertical" />
        <div>Optimized for you</div>
      </div>
    </div>
  );
});

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add separator

import { type PropsOf, component$ } from '@builder.io/qwik';
import { Separator as HeadlessSeparator } from '@qwik-ui/headless';
import { cn } from '@qwik-ui/utils';
 
export const Separator = component$<PropsOf<typeof HeadlessSeparator>>(
  ({ orientation = 'horizontal', decorative = true, ...props }) => {
    return (
      <>
        <HeadlessSeparator
          {...props}
          decorative={decorative}
          orientation={orientation}
          class={cn(
            'shrink-0 bg-border',
            orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
            props.class,
          )}
        />
      </>
    );
  },
);

Usage

import { Separator } from '~/components/ui';

<Separator />