Divider

Divider

The Divider component provides a visual separation between sections of content. It helps organize related content and makes the structure of an interface easier to understand.

import Button from "rocksolidjs/Button";
import Card from "rocksolidjs/Card";
import CardContent from "rocksolidjs/CardContent";
import CardFooter from "rocksolidjs/CardFooter";
import Divider from "rocksolidjs/Divider";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <Card class="w-full max-w-sm" variant="outlined">
      <CardContent>
        <Typography variant="h5">Upgrade your plan</Typography>
        <Typography variant="body2" class="text-muted-foreground mt-1">
          Get more storage and advanced features.
        </Typography>
      </CardContent>

      <Divider aria-hidden />

      <CardFooter class="justify-end">
        <Button variant="ghost">Not now</Button>
        <Button color="success">Upgrade</Button>
      </CardFooter>
    </Card>
  );
}

Examples

Vertical Divider

Use a vertical Divider to separate elements in a horizontal layout.

import Button from "rocksolidjs/Button";
import Divider from "rocksolidjs/Divider";

export default function Example() {
  return (
    <div class="flex items-center rounded-lg border border-neutral-300 dark:border-neutral-700">
      <Button variant="ghost" class="rounded-none rounded-tl-[inherit] rounded-bl-[inherit]">Edit</Button>
      <Divider aria-hidden orientation="vertical" />
      <Button variant="ghost" class="rounded-none">Duplicate</Button>
      <Divider aria-hidden orientation="vertical" />
      <Button variant="ghost" class="rounded-none rounded-tr-[inherit] rounded-br-[inherit]">Delete</Button>
    </div>
  );
}

When using a vertical Divider, make sure its parent container has an appropriate height so that the divider is visible.

Children and Alignment

Use the children prop to add content to the Divider and the align prop to control the content’s position.

import Chip from "rocksolidjs/Chip";
import Divider from "rocksolidjs/Divider";

export default function Example() {
  return (
    <div class="flex flex-col w-full gap-4">
      <Divider>CENTER</Divider>
      <Divider align="start">START</Divider>
      <Divider align="end">END</Divider>
      <Divider>
        <Chip label="CENTER"/>
      </Divider>
    </div>
  );
}

Custom Styling

Use the class prop to change properties such as color, spacing, thickness, or size.

import Divider from "rocksolidjs/Divider";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <div class="w-full max-w-sm text-center">
      <Typography variant="body1">Account</Typography>
      <Divider aria-hidden class="my-2 border-4 rounded-full" />
      <Typography variant="body1">Preferences</Typography>
    </div>
  );
}

Accessibility

  • Use the Divider to visually and semantically separate sections of content.
  • For purely decorative dividers that do not convey meaningful structure, use aria-hidden="true" so they are ignored by assistive technologies.
  • Do not rely on the Divider alone to communicate important information.

API

Divider

The Divider component supports custom HTML elements, horizontal or vertical orientations, and custom CSS classes.

Prop Type Required Default Description
align "start" | "center" | "end" No "center" Controls the alignment of the Divider content.
as string No "div" The HTML element used to render the Divider.
children JSXElement No — Content to display within the Divider.
class string No — Additional CSS classes applied to the Divider.
orientation "horizontal" | "vertical" No "horizontal" Controls the direction of the Divider.
slotProps { divider?: object } No — Provides props for customizing the Divider slots.
  • divider — Props for the internal divider element.
  • Card — Use Card to group related content into a distinct container.