CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tremor--react

Tremor React is a comprehensive React component library built on Tailwind CSS providing 60+ components for building data visualizations, charts, and analytical dashboards.

Overview
Eval results
Files

layout-elements.mddocs/

Layout Components

Container and structural components for organizing dashboards.

Layout Selection

ComponentPurposeKey Props
CardContent containerdecoration, decorationColor
FlexFlexbox layoutflexDirection, justifyContent, alignItems
GridResponsive gridnumItems, numItemsSm/Md/Lg
ColGrid column spannumColSpan, numColSpanSm/Md/Lg
DividerVisual separatorchildren (optional label)
DialogModal overlayopen, onClose, static, unmount
AccordionCollapsible sectionsdefaultOpen (use with AccordionList/Header/Body)

Card

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  decoration?: "left" | "right" | "top" | "bottom" | "";
  decorationColor?: Color;
}

Examples:

import { Card, Title, Text } from '@tremor/react';

<Card><Title>Sales Overview</Title></Card>
<Card decoration="left" decorationColor="blue"><Title>New Users</Title></Card>

Flex

interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
  flexDirection?: "row" | "col" | "row-reverse" | "col-reverse";
  justifyContent?: "start" | "end" | "center" | "between" | "around" | "evenly";
  alignItems?: "start" | "end" | "center" | "baseline" | "stretch";
  children: React.ReactNode;
}

Examples:

import { Flex, Title, Button } from '@tremor/react';

// Header layout
<Flex justifyContent="between" alignItems="center">
  <Title>Dashboard</Title>
  <Button>Export</Button>
</Flex>

// Vertical stack
<Flex flexDirection="col" alignItems="center" className="gap-4">
  <Title>Welcome</Title>
  <Button>Continue</Button>
</Flex>

Grid

interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
  numItems?: number; // Base columns
  numItemsSm?: number; // 640px+
  numItemsMd?: number; // 768px+
  numItemsLg?: number; // 1024px+
  children: React.ReactNode;
}

Examples:

import { Grid, Card, Metric, Text } from '@tremor/react';

// Responsive: 1 col mobile, 2 tablet, 4 desktop
<Grid numItems={1} numItemsSm={2} numItemsLg={4} className="gap-6">
  <Card><Text>Users</Text><Metric>1,234</Metric></Card>
  <Card><Text>Revenue</Text><Metric>$45,231</Metric></Card>
  <Card><Text>Conversion</Text><Metric>3.2%</Metric></Card>
  <Card><Text>Growth</Text><Metric>+12%</Metric></Card>
</Grid>

Col

Use within Grid to control column spans at different breakpoints.

interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
  numColSpan?: number;
  numColSpanSm?: number;
  numColSpanMd?: number;
  numColSpanLg?: number;
  children?: React.ReactNode;
}

Examples:

import { Grid, Col, Card } from '@tremor/react';

<Grid numItems={12}>
  <Col numColSpan={12} numColSpanLg={3}>
    <Card>Sidebar (3 cols on lg)</Card>
  </Col>
  <Col numColSpan={12} numColSpanLg={9}>
    <Card>Main content (9 cols on lg)</Card>
  </Col>
</Grid>

Divider

interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode; // Optional centered text label
}

Examples:

import { Divider, Card } from '@tremor/react';

<Card>
  <div>Section 1</div>
  <Divider />
  <div>Section 2</div>
</Card>

// With label
<Divider>Settings</Divider>

Dialog

Modal dialog system. Requires DialogPanel child.

interface DialogProps {
  open: boolean; // Required, controlled
  onClose: (value: boolean) => void; // Required
  role?: "dialog" | "alertdialog";
  static?: boolean; // Disable backdrop/Escape closing
  unmount?: boolean; // Unmount when closed
  children: React.ReactNode; // Usually DialogPanel
}

interface DialogPanelProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
}

Examples:

import { Dialog, DialogPanel, Button, Title, Text } from '@tremor/react';
import { useState } from 'react';

function BasicDialog() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
      <Dialog open={isOpen} onClose={setIsOpen}>
        <DialogPanel>
          <Title>Dialog Title</Title>
          <Text className="mt-2">Dialog content</Text>
          <Button className="mt-4" onClick={() => setIsOpen(false)}>Close</Button>
        </DialogPanel>
      </Dialog>
    </>
  );
}

// Confirmation dialog
function ConfirmDialog() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Dialog open={isOpen} onClose={setIsOpen}>
      <DialogPanel className="max-w-sm">
        <Title>Confirm Deletion</Title>
        <Text>Are you sure? This cannot be undone.</Text>
        <div className="mt-6 flex gap-3 justify-end">
          <Button variant="secondary" onClick={() => setIsOpen(false)}>Cancel</Button>
          <Button color="red" onClick={() => {/* delete */ setIsOpen(false)}}>Delete</Button>
        </div>
      </DialogPanel>
    </Dialog>
  );
}

Accordion

Collapsible sections. Use AccordionList to group multiple accordions.

interface AccordionProps {
  defaultOpen?: boolean;
  children: React.ReactNode; // AccordionHeader and AccordionBody
}

interface AccordionListProps {
  children: React.ReactElement[] | React.ReactElement; // Accordion components
}

interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: React.ReactNode;
}

interface AccordionBodyProps {
  children?: React.ReactNode;
}

Examples:

import {
  Accordion,
  AccordionList,
  AccordionHeader,
  AccordionBody,
  Text,
} from '@tremor/react';

// Single accordion
<Accordion>
  <AccordionHeader>Product Information</AccordionHeader>
  <AccordionBody>
    <Text>Detailed specifications...</Text>
  </AccordionBody>
</Accordion>

// Starts open
<Accordion defaultOpen={true}>
  <AccordionHeader>Important Notice</AccordionHeader>
  <AccordionBody><Text>Visible by default</Text></AccordionBody>
</Accordion>

// Grouped accordions
<AccordionList>
  <Accordion>
    <AccordionHeader>Shipping</AccordionHeader>
    <AccordionBody><Text>Free shipping on orders over $50...</Text></AccordionBody>
  </Accordion>
  <Accordion>
    <AccordionHeader>Returns</AccordionHeader>
    <AccordionBody><Text>Returns accepted within 30 days...</Text></AccordionBody>
  </Accordion>
</AccordionList>

Notes:

  • AccordionList provides seamless borders between accordions
  • Each Accordion manages its own open/close state independently
  • AccordionHeader renders as <button> for accessibility
  • Use defaultOpen to set initial state (uncontrolled)

Dashboard Layout Pattern

import { Grid, Card, Flex, Title, Text, Metric, Button } from '@tremor/react';

function Dashboard() {
  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <Flex justifyContent="between" alignItems="center">
        <div>
          <Title>Analytics Dashboard</Title>
          <Text>Key performance metrics</Text>
        </div>
        <Button>Export Report</Button>
      </Flex>

      {/* Metrics Grid */}
      <Grid numItems={1} numItemsSm={2} numItemsLg={4} className="gap-6">
        <Card decoration="left" decorationColor="blue">
          <Text>Revenue</Text>
          <Metric>$45,231</Metric>
        </Card>
        {/* More cards... */}
      </Grid>
    </div>
  );
}

Common Mistakes

  • ❌ Not providing responsive props for Grid (use numItemsSm/Md/Lg)
  • ❌ Forgetting DialogPanel inside Dialog
  • ❌ Using AccordionHeader/Body outside Accordion
  • ❌ Not wrapping multiple Accordions in AccordionList (missing seamless borders)
  • ❌ Trying to control Accordion state (use defaultOpen, it's uncontrolled)

See Also

  • Types Reference for Color, Size, FlexDirection, JustifyContent, AlignItems

Install with Tessl CLI

npx tessl i tessl/npm-tremor--react

docs

chart-elements.md

common-props.md

icon-elements.md

index.md

input-elements.md

layout-elements.md

list-elements.md

text-elements.md

types.md

visualization-elements.md

tile.json