diff --git a/.eslintrc b/.eslintrc
index f5b4f027f..e83669525 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -16,12 +16,12 @@
"react-hooks"
],
"rules": {
+ "react/button-has-type": "error",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-explicit-any": "off",
- "react/display-name": "off",
"react/prop-types": "off"
},
"settings": {
diff --git a/.github/ISSUE_TEMPLATE/bug-report.yaml b/.github/ISSUE_TEMPLATE/bug-report.yaml
new file mode 100644
index 000000000..62522edde
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug-report.yaml
@@ -0,0 +1,78 @@
+name: "\U0001F41E Bug report"
+description: Create a report to help us improve
+title: "[Bug]: "
+labels: ["Triage"]
+body:
+ - type: markdown
+ attributes:
+ value: |
+ **Before submitting a bug report**
+
+ The issue list is reserved for bug reports and feature requests. If you have a usage question, you can:
+
+ - Read the [documentation](https://npm.tremor.so/docs/getting-started/installation)
+ - Ask questions on [Slack](https://join.slack.com/t/tremor-community/shared_invite/zt-1u8jqmcmq-Fdr9B6MbnO7u8FkGh~2Ylg)
+
+ Also try to search for your issue/feature - another user may have already requested something similar, thanks!
+
+ - type: input
+ id: version
+ attributes:
+ label: Tremor Version
+ validations:
+ required: true
+ - type: input
+ id: reproduction-link
+ attributes:
+ label: Link to minimal reproduction
+ description: |
+ The easiest way to provide a reproduction is provide a link to a public GitHub repository or a tools like [Stackblitz](https://stackblitz.com) or [Codesandbox](https://codesandbox.io).
+
+ The reproduction should be **minimal**. This means, it should contain only the bare minimum amount of code needed
+ to show the bug.
+ placeholder: Reproduction Link
+ validations:
+ required: true
+ - type: textarea
+ id: steps-to-reproduce
+ attributes:
+ label: Steps to reproduce
+ description: |
+ What do we need to do after opening your repro in order to make the bug happen? Clear and concise reproduction instructions are important for us to be able to triage your issue in a timely manner. Note that you can use [Markdown](https://guides.github.com/features/mastering-markdown/) to format lists and code.
+ placeholder: Steps to reproduce
+ validations:
+ required: true
+ - type: textarea
+ id: expected
+ attributes:
+ label: What is expected?
+ validations:
+ required: true
+ - type: textarea
+ id: actually-happening
+ attributes:
+ label: What is actually happening?
+ validations:
+ required: true
+ - type: dropdown
+ id: browsers
+ attributes:
+ label: What browsers are you seeing the problem on?
+ multiple: true
+ options:
+ - Chrome
+ - Microsoft Edge
+ - Safari
+ - Firefox
+ - Vivaldi
+ - Brave
+ - Other
+ - type: textarea
+ id: additional-comments
+ attributes:
+ label: Any additional comments?
+ description: E.g. some background/context of how you ran into this bug.
+ - type: markdown
+ attributes:
+ value: |
+ This bug report template was inspired by the issue template from [vuejs](https://github.com/vuejs/core)
diff --git a/.github/ISSUE_TEMPLATE/config.yaml b/.github/ISSUE_TEMPLATE/config.yaml
new file mode 100644
index 000000000..35d9b5fe0
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yaml
@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+ - name: Slack Community
+ url: https://join.slack.com/t/tremor-community/shared_invite/zt-1u8jqmcmq-Fdr9B6MbnO7u8FkGh~2Ylg
+ about: Please ask and answer usage questions here.
diff --git a/.github/ISSUE_TEMPLATE/feature-request.yaml b/.github/ISSUE_TEMPLATE/feature-request.yaml
new file mode 100644
index 000000000..319e1743f
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature-request.yaml
@@ -0,0 +1,39 @@
+name: "\U0001F680 New feature proposal"
+description: Suggest an idea for this project
+title: "[Feature]: "
+labels: ["Triage"]
+body:
+ - type: markdown
+ attributes:
+ value: |
+ **Before submitting a feature request**
+
+ The issue list is reserved for bug reports and feature requests. If you have a usage question, you can:
+
+ - Read the [documentation](https://npm.tremor.so/docs/getting-started/installation)
+ - Ask questions on [Slack](https://join.slack.com/t/tremor-community/shared_invite/zt-1u8jqmcmq-Fdr9B6MbnO7u8FkGh~2Ylg)
+
+ Also try to search for your issue/feature - another user may have already requested something similar, thanks!
+
+ - type: textarea
+ id: problem-description
+ attributes:
+ label: What problem does this feature solve?
+ description: |
+ Explain your use case, context, and rationale behind this feature request.
+
+ An important design goal of Tremor is keeping the API small. The problem should be common enough to justify the addition.
+ placeholder: Problem description
+ validations:
+ required: true
+ - type: textarea
+ id: proposed-API
+ attributes:
+ label: What does the proposed API look like?
+ description: |
+ Describe how you propose to solve the problem and provide code samples of how the API would work once implemented. Note that you can use [Markdown](https://guides.github.com/features/mastering-markdown/) to format your code blocks.
+ placeholder: Assumed API
+ - type: markdown
+ attributes:
+ value: |
+ This bug report template was inspired by the feature template from [vuejs](https://github.com/vuejs/core)
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 000000000..4346eaffb
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,55 @@
+
+
+
+
+**Description**
+
+
+
+**Related issue(s)**
+
+
+
+
+
+
+**What kind of change does this PR introduce?** (check at least one)
+
+
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New Feature (non-breaking change which adds functionality)
+- [ ] New Feature (BREAKING CHANGE which adds functionality)
+- [ ] Refactor
+- [ ] Build-related changes
+- [ ] Other, please describe:
+
+**Does this PR introduce a breaking change?** (check one)
+
+- [ ] Yes
+- [ ] No
+
+If yes, please describe the impact and migration path for existing applications:
+
+**How has this been tested?**
+
+
+
+
+
+**Screenshots (if appropriate):**
+
+**The PR fulfils these requirements:**
+
+
+
+- [ ] It's submitted to the `main` branch
+- [ ] When resolving a specific issue, it's referenced in the related issue section above
+- [ ] My change requires a change to the documentation. (Managed by Tremor Team)
+- [ ] I have added tests to cover my changes
+- [ ] Check the ["Allow edits from maintainers" option](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork) while creating your PR.
+- [ ] Add refs #XXX or fixes #XXX to the related issue section if your PR refers to or fixes an issue.
+- [ ] By contributing to Tremor, you confirm that you have read and agreed to Tremor's [CONTRIBUTING.md](https://github.com/tremorlabs/tremor-npm/blob/main/CONTRIBUTING.md) guideline. You also agree that your contributions will be licensed under the [Apache License 2.0](https://github.com/tremorlabs/tremor-npm/blob/main/License) license.
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 856147caf..cfe4ae49b 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -8,9 +8,8 @@ on:
- synchronize
push:
branches:
- - '**'
- - '!main'
-
+ - "**"
+ - "!main"
jobs:
build:
@@ -18,11 +17,11 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: checkout
- uses: actions/checkout@v2.4.2
+ uses: actions/checkout@v4
- name: node
- uses: actions/setup-node@v3.4.1
+ uses: actions/setup-node@v4
with:
- node-version: 18
+ node-version: 20
registry-url: https://registry.npmjs.org
- name: install react
run: npm i react
@@ -34,4 +33,3 @@ jobs:
run: npm run tests
- name: build
run: npm run build
-
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index c7ba213e6..a132102d2 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -13,11 +13,11 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: checkout
- uses: actions/checkout@v2.4.2
+ uses: actions/checkout@v4
- name: node
- uses: actions/setup-node@v3.4.1
+ uses: actions/setup-node@v4
with:
- node-version: 18
+ node-version: 20
registry-url: https://registry.npmjs.org
- name: install react
run: npm i react
diff --git a/.gitignore b/.gitignore
index 6acc570d5..fc740099e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,7 @@
node_modules
dist
-.DS_Store
\ No newline at end of file
+.DS_Store
+storybook-static
+package-lock.json
+.vscode
+yarn.lock
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
index bd8a616c3..34d9b0533 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,10 +1,10 @@
{
- "bracketSpacing": true,
- "singleQuote": false,
- "trailingComma": "all",
- "tabWidth": 2,
- "semi": true,
- "printWidth": 100,
- "jsxSingleQuote": false,
- "endOfLine": "auto"
+ "bracketSpacing": true,
+ "singleQuote": false,
+ "trailingComma": "all",
+ "tabWidth": 2,
+ "semi": true,
+ "printWidth": 100,
+ "jsxSingleQuote": false,
+ "endOfLine": "auto"
}
diff --git a/.storybook/main.js b/.storybook/main.js
index d67549264..274cf5770 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,34 +1,63 @@
-var path = require('path');
+var path = require("path");
module.exports = {
- "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
- "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", {
- name: '@storybook/addon-postcss',
- options: {
- cssLoaderOptions: {
- // When you have splitted your css over multiple files
- // and use @import('./other-styles.css')
- importLoaders: 1,
- },
- postcssLoaderOptions: {
- // When using postCSS 8
- implementation: require('postcss'),
+ stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
+ addons: [
+ "@storybook/addon-links",
+ "@storybook/addon-essentials",
+ "@storybook/addon-interactions",
+ "@storybook/addon-styling-webpack",
+ "@storybook/addon-themes",
+ "@storybook/addon-a11y",
+ {
+ name: "@storybook/addon-styling-webpack",
+ options: {
+ rules: [
+ {
+ test: /\.css$/,
+ sideEffects: true,
+ use: [
+ require.resolve("style-loader"),
+ {
+ loader: require.resolve("css-loader"),
+ options: {
+ importLoaders: 1,
+ },
+ },
+ {
+ loader: require.resolve("postcss-loader"),
+ options: {
+ implementation: require.resolve("postcss"),
+ },
+ },
+ ],
+ },
+ ],
},
},
- }],
- "framework": "@storybook/react",
- core: {
- builder: "webpack5"
+ "@storybook/addon-webpack5-compiler-babel",
+ "@chromatic-com/storybook",
+ ],
+
+ framework: {
+ name: "@storybook/react-webpack5",
+ options: {},
},
+
features: {
previewMdx2: true,
},
+
webpackFinal: async (config) => {
- config.resolve.modules = [
- ...(config.resolve.modules || []),
- path.resolve(__dirname, "../src"),
- ];
+ config.resolve.modules = [...(config.resolve.modules || []), path.resolve(__dirname, "../src")];
return config;
},
-};
\ No newline at end of file
+
+ docs: {},
+
+ typescript: {
+ reactDocgen: "react-docgen-typescript",
+ },
+};
diff --git a/.storybook/manager.js b/.storybook/manager.js
new file mode 100644
index 000000000..18d20f308
--- /dev/null
+++ b/.storybook/manager.js
@@ -0,0 +1,7 @@
+import { addons } from "@storybook/manager-api";
+import { themes } from "@storybook/theming";
+import tremorTheme from "./tremorTheme";
+
+addons.setConfig({
+ theme: tremorTheme,
+});
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 87a824856..a0e871d6c 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,11 +1,36 @@
-import '../src/styles.css'
+import "../src/styles.css";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
export const parameters = {
- actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
-}
\ No newline at end of file
+ backgrounds: {
+ default: "light",
+ values: [
+ {
+ name: "light",
+ value: "#ffffff",
+ },
+ {
+ name: "dark",
+ value: "#0f172a",
+ },
+ ],
+ },
+};
+
+export const decorators = [
+ withThemeByDataAttribute({
+ themes: {
+ light: "light",
+ dark: "dark",
+ },
+ defaultTheme: "light",
+ attributeName: "data-mode",
+ }),
+];
+export const tags = ["autodocs"];
diff --git a/.storybook/tremorTheme.js b/.storybook/tremorTheme.js
new file mode 100644
index 000000000..730a3489b
--- /dev/null
+++ b/.storybook/tremorTheme.js
@@ -0,0 +1,21 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+ base: "light",
+ brandTitle: "Tremor Storybook",
+ brandUrl: "https://storybook.tremor.so",
+ // brandImage: 'images/tremor-logo.svg',
+ brandTarget: "_self",
+ //
+ colorSecondary: "#3b82f6",
+
+ // UI
+ appBg: "#ffffff",
+ appContentBg: "#ffffff",
+ // appBorderColor: '#585C6D',
+ appBorderRadius: 0,
+ //
+ barTextColor: "#9E9E9E",
+ barSelectedColor: "#3b82f6",
+ barBg: "#ffffff",
+});
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index f85fe8b56..000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "editor.wordWrapColumn": 100,
- "editor.rulers": [100],
- "typescript.preferences.importModuleSpecifier": "non-relative",
- "typescript.tsdk": "node_modules/typescript/lib",
-}
\ No newline at end of file
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 18c914718..afaa98fe5 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
Examples of behavior that contributes to a positive environment for our
community include:
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior, harassment of an
+standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b53419b43..3f9289061 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,44 +1,61 @@
-# Contributing
+## **Contributing to Tremor**
-Thanks for your interest in contributing to tremor. Please take a moment to review this document before submitting a pull request. This document will outline how to submit changes to this repository and which conventions to follow. If you are ever in doubt about anything we encourage you to reach out either by submitting an issue here or reaching out via [Twitter](https://twitter.com/tremorlabs) or [shoot us an email](mailto:hello@tremor.so).
+Thanks for your interest in contributing to Tremor. Please take a moment to review this document before submitting a pull request. This document will outline how to submit changes to this repository and which conventions to follow. If you are ever in doubt about anything we encourage you to reach out on [Slack](https://tremor-community.slack.com/join/shared_invite/zt-2a95vjndc-YCKurK3HVAkYtjialnT2_A#/shared-invite/email), [open a discussion](#discussions), or [shoot us an email](mailto:hello@tremor.so).
-## Prerequisites
+### **Prerequisites**
-- **You are familiar with GitHub Issues and Pull Requests**
-- **You have read the [docs](https://www.tremor.so/docs/getting-started/introduction).**
+- You are familiar with [issues](#issues) and [pull requests](#pulls).
+- You have read the [docs](https://npm.tremor.so/docs/getting-started/installation).
-### Issues before PRs
+### **Issues before PRs**
-1. Before you start working on a change please make sure that there is an issue for what you will be working on. You can either find and [existing issue](https://github.com/tremorlabs/tremor/issues) or [open a new issue](https://github.com/tremorlabs/tremor/issues/new) if none exists.
-2. When you are ready to start working on a change you should first [fork the tremor repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) and [branch out](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-and-deleting-branches-within-your-repository) from the `main` branch.
+1. Before you start working on a change please make sure that there is an issue for what you will be working on. You can either find an [existing issue](https://github.com/tremorlabs/tremor-npm/issues) or [open a new issue](https://github.com/tremorlabs/tremor-npm/issues/new/choose) if none exists.
+2. When you are ready to start working on a change you should first [fork the Tremor repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) and [branch out](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-and-deleting-branches-within-your-repository) from the `main` branch.
3. Make your changes.
-4. [Open a pull request towards the main branch in the tremor repo](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork). Then, our team will review, comment and eventually approve your PR.
+4. [Open a pull request towards the main branch in the Tremor repo](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork). Then, our team will review, comment and eventually approve your PR.
-### Branches
+### **Branches**
All changes should be part of a branch and submitted as a pull request - your branches should be prefixed with one of:
- `fix/` for bug fixes
- `feat/` for features
-### Commits
+### **Commits**
Strive towards keeping your commits small and isolated - this helps the reviewer understand what is going on and makes it easier to process your requests.
-### Pull Requests
+### **Pull Requests**
-Once your changes are ready you must submit your branch as a pull request. Your pull request should be opened against the `main` branch in the main tremor repo.
+Once your changes are ready you must submit your branch as a pull request. Your pull request should be opened against the `main` branch in the main Tremor repo.
-In your PR's description you should follow the structure:
+In your PR's description, you should follow the structure as outlined in the PR template:
-- **What** - what changes are in this PR
-- **Why** - why are these changes relevant
-- **How** - how have the changes been implemented
-- **Testing** - how has the changes been tested or how can the reviewer test the feature
+1. Description: Describe your changes in detail.
+2. Related issue(s): Please link to the issue.
+3. What kind of change does this PR introduce?: Select from template options.
+4. Does this PR introduce a breaking change?: Select Yes/No.
+5. How has This been tested?: Please describe how you tested your changes.
+6. Screenshots (if appropriate):
-We highly encourage that you do a self-review prior to requesting a review. To do a self review click the review button in the top right corner, go through your code and annotate your changes. This makes it easier for the reviewer to process your PR.
+**The PR fulfills these requirements:**
-### Documentation
+- [ ] It's submitted to the `main` branch.
+- [ ] When resolving a specific issue, it's referenced in the related issue section above.
+- [ ] My change requires a change to the documentation. (Managed by Tremor Team).
+- [ ] I have added tests to cover my changes.
-- We generally encourage to document your changes through comments in your code.
-- If you alter user-facing behavior you must provide documentation for such changes, for reference, check out [our documentation]([url](https://www.tremor.so/docs/getting-started/introduction)).
+* Be sure to check the "Allow edits from maintainers" option while creating your PR.
+* If your PR refers to or fixes an issue, be sure to add refs #XXX or fixes #XXX to the related issue section. Replacing XXX with the respective issue number.
+
+Be sure to fill the PR Template accordingly.
+We encourage that you do a self-review prior to requesting a review. To do a self review click the review button in the top right corner, go through your code and annotate your changes. This makes it easier for the reviewer to process your PR.
+
+### **Documentation**
+
+- We generally encourage you to document your changes through comments in your code.
+- If you alter user-facing behavior you must provide documentation for such changes, for reference, check out [our documentation](<[url](https://npm.tremor.so/docs/getting-started/introduction)>).
+
+### **Licensing**
+
+By contributing to Tremor, you agree that your contributions will be licensed under the [Apache License 2.0](https://github.com/tremorlabs/tremor-npm/blob/main/License) license. By submitting your pull request, you agree to our [Contributor License Agreement (CLA)](https://tremor.so/contributors). This agreement clarifies our ability to incorporate your contributions.
diff --git a/README.md b/README.md
index 9cec22960..db38016ec 100644
--- a/README.md
+++ b/README.md
@@ -1,164 +1,113 @@
-
-
-
+
+
+
-[Tremor](https://tremor.so/) lets you create simple and modular components to build insightful dashboards in a breeze. Fully open-source, made by data scientists and software engineers with a sweet spot for design.
+[Tremor NPM](https://npm.tremor.so/) 20+ open-source components built on top of Tailwind CSS to make visualizing data simple again. Fully open-source, made by data scientists and software engineers with a sweet spot for design.
-
-
+
-
+
-
-
+
## Getting Started
-You can use tremor either within a [React](https://reactjs.org/) or [Next.js](https://nextjs.org) Project.
-For new projects, we recommend using Next.js, as it also provides a simple deployment workflow through the [Vercel](https://vercel.com/docs) platform.
-For other Frameworks, see our [Installation Guide](https://www.tremor.so/docs/getting-started/installation).
-
-
-
-## Using NextJS
-
-In your terminal, we create a new Next project:
-
-```bash
-npx create-next-app my-project --typescript
-cd my-project
-```
-
-
-
-Install tremor from your command line via npm.
-
-```bash
-npm install @tremor/react
-```
-
-
-
-Install Tailwind CSS and its peer dependencies
-
-```bash
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-```
-
-
-Add the paths to all of your template files in your `tailwind.config.js` file.
-
-```diff
-/** @type {import('tailwindcss').Config} */
-
-module.exports = {
- content: [
- "./app/**/*.{js,ts,jsx,tsx}",
- "./pages/**/*.{js,ts,jsx,tsx}",
- "./components/**/*.{js,ts,jsx,tsx}",
-+ './node_modules/@tremor/**/*.{js,ts,jsx,tsx}',
-
- // Or if using src directory:
- "./src/**/*.{js,ts,jsx,tsx}",
- ],
- theme: {
- extend: {},
- },
- plugins: [],
-}
-```
-
-Add the `@tailwind` directives for each Tailwind's layers to your `globals.css` file.
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-Start the dev server
-
-```bash
-npm run dev
-```
-
-
-
-**💡 Hint:** Since we are in beta, please be aware that there might be breaking changes in the future.
-
+See our [Installation Guide](https://npm.tremor.so/docs/getting-started/installation). To make use of the library we also need Tailwind CSS setup in the project.
## Example
-With tremor creating an analytical interface is easy.
-
-
+With Tremor creating an analytical interface is easy.
```jsx
-//Card.tsx
-import { Card, Text, Metric, Flex, ProgressBar } from "@tremor/react";
-export default () => (
-
- Sales
- $ 71,465
-
- 32% of annual target
- $ 225,000
-
-
-
-);
+"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 (
+
+
+ Total Requests
+
+