repository·main·Indexed 12 days ago
https://github.com/tremorlabs/tremor-npmA collection of over 20 open-source React components built on top of Tailwind CSS, designed to simplify the creation of data visualizations, charts, and analytical dashboards. Includes components such as AreaChart, BarChart, DonutChart, FunnelChart, LineChart, ScatterChart, and various input and layout elements.
Tremor NPM provides over 20 open-source React components designed for building charts and dashboards. The library is built on top of Tailwind CSS.
To use Tremor, you must follow the Installation Guide and ensure that Tailwind CSS is properly configured in your project, as the components rely on it for styling.
The Tabs component suite in @tremor/react allows you to create tabbed interfaces using a composition of TabGroup, TabList, Tab, TabPanels, and TabPanel.
TabGroup: The top-level container that manages the state of the tabs.TabList: A container for the clickable Tab elements.Tab: Individual clickable tab items.TabPanels: A container for the content areas.TabPanel: The specific content area associated with a tab.import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@tremor/react';
function MyComponent() {
return (
<TabGroup defaultValue="tab1">
<TabList>
<Tab value="tab1">Tab 1</Tab>
<Tab value="tab2">Tab 2</Tab>
</TabList>
<TabPanels>
<TabPanel value="tab1">Content for Tab 1</TabPanel>
<TabPanel value="tab2">Content for Tab 2</TabPanel>
</TabPanels>
</TabGroup>
);
}You can compose Tremor components like Card and AreaChart to build analytical interfaces. The AreaChart component requires a data array, an index key (the X-axis), and an array of categories (the Y-axis series). You can also customize the visual style using colors and yAxisWidth.
"use client";
import { AreaChart, Card } from "@tremor/react";
const chartdata = [
{
date: "Jan 23",
"Route Requests": 289,
"Station Requests": 233,
},
{
date: "Oct 23",
"Route Requests": 283,
"Station Requests": 247,
},
];
export default function Example() {
return (
<Card className="max-w-4xl">
<span className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
Total Requests
</span>
<p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">
6,568
</p>
<AreaChart
className="mt-2 h-80"
data={chartdata}
index="date"
categories={["Route Requests", "Station Requests"]}
colors={["indigo", "rose"]}
yAxisWidth={33}
/>
</Card>
);
}The Select component is used to create a dropdown selection interface. It is composed of a parent Select component and multiple SelectItem components representing the available options.
import { Select, SelectItem } from "@tremor/react";
function MyComponent() {
return (
<Select>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
</Select>
);
}The List component acts as a container for a collection of items, while ListItem represents an individual entry within that list. These components are used together to build structured lists in your UI.
import { List, ListItem } from '@tremor/react';
function MyComponent() {
return (
<List>
<ListItem>Item 1</ListItem>
<ListItem>Item 2</ListItem>
<ListItem>Item 3</ListItem>
</List>
);
}The @tremor/react package exports Badge and BadgeDelta components for displaying status indicators or value changes. Use Badge for general status labels and BadgeDelta to indicate positive or negative changes (e.g., percentage increases or decreases).
import { Badge, BadgeDelta } from "@tremor/react";
// Example usage:
// <Badge>Status</Badge>
// <BadgeDelta deltaType="incremental">+12%</BadgeDelta>The @tremor/react package provides a collection of specialized input components for building interactive forms and dashboards. These components are exported from the main input elements entrypoint.
Available input components include:
ButtonDatePickerDateRangePickerMultiSelectNumberInputSearchSelectSelectSwitchTabsTextareaTextInput./lib/inputTypes. Use these types when defining props or state that interact with Tremor's input components to ensure type safety.Tremor components are organized into functional categories. You can import all available components from the main entrypoint, which re-exports elements from the following modules:
chart-elements: Charting and data visualization components.icon-elements: Iconography components.input-elements: Form inputs, buttons, and selection controls.layout-elements: Structural components like containers, grids, and cards.list-elements: List and collection components.spark-elements: Sparkline and small-scale data visualization components.text-elements: Typography and text formatting components.vis-elements: General visualization elements.// Example of importing components from the main entrypoint
import { Card, Text, Metric, Title } from "@tremor/react";TabPanels and TabPanel components are used to render the content associated with each tab. The value prop on TabPanel must match the value prop on the corresponding Tab to ensure the correct content is displayed when that tab is selected.The following types are exported to allow for custom configuration of the Tabs components:
TabProps: Configuration for individual Tab components.TabGroupProps: Configuration for the TabGroup container (e.g., managing default values or state).TabListProps: Configuration for the TabList container.The @tremor/react package exports all UI components from the ./components directory. You can import individual components (such as Card, Button, Text, etc.) directly from the main package entrypoint.
import { Card, Text, Button } from '@tremor/react';
export const MyComponent = () => (
<Card>
<Text>Hello Tremor</Text>
<Button>Click me</Button>
</Card>
);