Tremor-Raw 开源项目使用教程

最新推荐文章于 2024-09-12 09:08:12 发布

施谨贞Des

最新推荐文章于 2024-09-12 09:08:12 发布

阅读量316

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00730/article/details/142081211

版权

Tremor-Raw 开源项目使用教程

tremor-rawCopy & Paste React components to build modern web applications. 项目地址:https://gitcode.com/gh_mirrors/tr/tremor-raw

1. 项目介绍

Tremor-Raw 是一个基于 React 的开源项目，旨在提供一组可定制、易用的 React 组件，帮助开发者快速构建现代化的 Web 应用程序和仪表盘。该项目由 Tremor Labs 维护，基于 Tailwind CSS 和 Radix UI 构建，提供了超过 35 个可访问的 React 组件。

主要特点：

可定制性：提供丰富的可定制组件，满足不同应用需求。
易用性：通过简单的复制粘贴即可集成到项目中。
现代化设计：基于 Tailwind CSS 和 Radix UI，确保组件的现代化和一致性。

2. 项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令克隆项目并安装依赖：

git clone https://github.com/tremorlabs/tremor-raw.git
cd tremor-raw
npm install

运行项目

安装完成后，通过以下命令启动开发服务器：

npm run dev

示例代码

以下是一个简单的示例，展示如何使用 Tremor-Raw 中的组件：

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

const data = [
  { date: '2023-01-01', value: 100 },
  { date: '2023-01-02', value: 200 },
  { date: '2023-01-03', value: 300 },
];

const App = () => (
  <Card>
    <Title>示例图表</Title>
    <AreaChart data={data} dataKey="date" categories={['value']} />
  </Card>
);

export default App;