1. Components
  2. Divider

Components

Divider

Separate content horizontally.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit.

   

Import Divider

Tremor exports one component for divider.

import { Divider } from "@tremor/react";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

import { Divider } from "@tremor/react";

export default () => (
  <Divider />
);

Usage example

The example below shows a composition of a Card with a Metric and some context information separated by a Divider component.

Sales

$ 34,743

Upgrades

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.

import { Card, Subtitle, Metric, Text, Divider } from "@tremor/react";

export default () => (
  <Card maxWidth="max-w-lg">
    <Text>Sales</Text>
    <Metric>$ 34,743</Metric>
    <Divider />
    <Subtitle>Upgrades</Subtitle>
      <Text marginTop="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor
      lorem non est congue blandit. Praesent non lorem sodales, suscipit est
      sed, hendrerit dolor.</Text>
  </Card>
);

API Reference: Divider

This component does not have any public properties.