Text Components

interface TitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
  color?: Color;
}
// Subtitle, Text, Metric have same interface

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

<Card>
  <Title>Annual Report</Title>
  <Subtitle>Fiscal Year 2024</Subtitle>
  <Text className="mt-2">
    This report provides comprehensive overview of company performance.
  </Text>
</Card>

// Metric card
<Card>
  <Text>Total Revenue</Text>
  <Metric>$45,231</Metric>
  <Text color="gray">+12% from last month</Text>
</Card>

// Colored text
<Title color="blue">Revenue Analysis</Title>
<Text color="gray">Secondary information</Text>

interface BoldProps extends React.HTMLAttributes<HTMLElement> {
  children: React.ReactNode;
}
// Italic has same interface

import { Bold, Italic, Text } from '@tremor/react';

<Text>
  Total revenue increased by <Bold>23%</Bold> this quarter.
</Text>

<Text>
  Data as of <Italic>January 15, 2024</Italic>
</Text>

interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string; // Required
  icon?: React.ElementType;
  color?: Color;
  children?: React.ReactNode; // Optional body content
}

import { Callout, Card } from '@tremor/react';
import {
  InformationCircleIcon,
  ExclamationTriangleIcon,
  CheckCircleIcon,
} from '@heroicons/react/24/outline';

// Info callout
<Callout
  title="System Maintenance"
  icon={InformationCircleIcon}
  color="blue"
>
  Scheduled maintenance on Sunday, 2:00 AM - 4:00 AM EST.
</Callout>

// Warning
<Callout
  title="Data Limit Warning"
  icon={ExclamationTriangleIcon}
  color="amber"
>
  You have used 85% of your monthly data allowance.
</Callout>

// Title only (no body)
<Callout title="New features available" icon={InformationCircleIcon} color="blue" />

interface LegendProps extends React.OlHTMLAttributes<HTMLOListElement> {
  categories: string[]; // Required
  colors?: (Color | string)[];
  onClickLegendItem?: (category: string, color: Color | string) => void;
  activeLegend?: string; // Currently highlighted legend item
  enableLegendSlider?: boolean; // Enable horizontal scrolling
}

import { Legend, Card, BarChart } from '@tremor/react';
import { useState } from 'react';

// Basic legend
<Legend
  categories={['Revenue', 'Profit', 'Expenses']}
  colors={['blue', 'emerald', 'red']}
/>

// Interactive with chart
function ChartWithLegend() {
  const [activeLegend, setActiveLegend] = useState<string>();
  const data = [
    { month: 'Jan', revenue: 2890, profit: 1200 },
    { month: 'Feb', revenue: 2756, profit: 1100 },
  ];

  return (
    <Card>
      <Legend
        categories={['revenue', 'profit']}
        colors={['blue', 'emerald']}
        onClickLegendItem={(cat) => setActiveLegend(cat === activeLegend ? undefined : cat)}
        activeLegend={activeLegend}
      />
      <BarChart
        data={data}
        index="month"
        categories={activeLegend ? [activeLegend] : ['revenue', 'profit']}
        colors={['blue', 'emerald']}
        showLegend={false}
      />
    </Card>
  );
}

// With slider (many categories)
<Legend
  categories={['Cat1', 'Cat2', 'Cat3', 'Cat4', 'Cat5', 'Cat6', 'Cat7']}
  colors={['blue', 'violet', 'cyan', 'emerald', 'amber', 'orange', 'red']}
  enableLegendSlider={true}
/>

<Card>
  <Flex justifyContent="between" alignItems="start">
    <div>
      <Title>Analytics Dashboard</Title>
      <Subtitle>Q4 2024 Performance</Subtitle>
      <Text className="mt-2">Real-time metrics and KPIs</Text>
    </div>
    <Button>Export Report</Button>
  </Flex>
</Card>

<Card>
  <Flex justifyContent="between" alignItems="start">
    <div>
      <Text>Total Revenue</Text>
      <Metric>$45,231</Metric>
    </div>
    <BadgeDelta deltaType="increase">+12.3%</BadgeDelta>
  </Flex>
  <Text className="mt-4" color="gray">
    <Bold>$5,420</Bold> increase from last month
  </Text>
</Card>

<Card>
  <Title>About This Report</Title>
  <Text className="mt-2">
    This dashboard provides comprehensive overview. Data is updated <Bold>every 5 minutes</Bold>.
  </Text>
  <Divider className="my-4" />
  <Text><Italic>Last updated: January 15, 2024 at 3:45 PM EST</Italic></Text>
  <Callout
    title="Data Freshness"
    icon={InformationCircleIcon}
    color="blue"
    className="mt-4"
  >
    All metrics reflect data as of the last sync.
  </Callout>
</Card>

// Status colors
<Text color="emerald">Success/Active</Text>
<Text color="amber">Warning/Pending</Text>
<Text color="red">Error/Inactive</Text>

// Brand colors
<Metric color="blue">Primary metric</Metric>
<Metric color="violet">Secondary metric</Metric>

// Neutral colors
<Text color="gray">Secondary information</Text>
<Text color="slate">Muted text</Text>

// Screen reader only
<Title id="section-header" className="sr-only">
  Screen reader only title
</Title>

// With ARIA labels
<Metric aria-describedby="metric-description">$45,231</Metric>
<Text id="metric-description" className="sr-only">
  Total revenue in US dollars
</Text>