Copy & Paste React components to build modern web applications.
Home Page: https://raw.tremor.so
License: Apache License 2.0
Tremor Raw offers customizable, accessible React components to build dashboards and modern web applications. Built on top of Tailwind CSS and Radix UI.
See our Installation Guide to get started.
We are always looking for new ideas or other ways to improve Tremor Raw. If you have developed anything cool or found a bug, send us a pull request. Check out our Contributor License Agreement here.
Copyright © 2024 Tremor. All rights reserved.
0.2.2
N/A
See the Bar Chart page.
The code on the Bar Chart page shows Line Chart code.
The code on the Bar Chart page shows Bar Chart code.
Chrome
Loving your work! Thank you Tremor team.
Newest Available
https://raw.tremor.so/docs/visualizations/progress-bar
Go to the link, and click on the code for ProgressBar.
Should show ProgressBar code, with exportable member ProgressBar.
Showing ProgressCircle code.
Safari, Other
No response
When using the "password" type on Input, there is always a button to show a password as plain text. I have a business requirement that it should only allow that for one password field, but not for repeat-password for security reasons.
Although easy to fix with raw library i would love to see this as core
//small pseudocode snipet on how to improve the Input field
{(isPassword && allowPasswordVisibility) && (
<div
className={cx(
"absolute bottom-0 right-0 flex h-full items-center justify-center px-3",
)}
>
<button
aria-label="Change password visibility"
0.0.0
https://raw.tremor.so/docs/ui/tab-navigation
Just copy and paste the code on the project and try to import him.
the component is expected to work as in the example
On the examples, its possible to see this code:
But, when copy and paste the component for the project, the code is that:
And the href prop don't exist on the code.
Chrome, Other
No response
I have been exploring the library and found it incredibly useful for building modern UIs with ready-made React components. However, I noticed that a carousel component is currently missing from the library, which I believe could be a valuable addition.
I would like to propose the addition of a carousel component to the library. This component could include the following features:
I am willing to contribute to this feature by developing the carousel component. Before proceeding, I wanted to get feedback from the maintainers and ensure that this aligns with the project's goals and standards.
No response
// Tremor Raw Dropdown Menu [v0.0.0]
code below
Write a simple menu
<DropdownMenu>
<DropdownMenuItem asChild>
// anything here will result in an exception
</DropdownMenuItem>
</DropdownMenu>
Error: React.Children.only expected to receive a single React element child.
Working component
Wrap whole body of DropdownMenuPrimitives.Item in <></>
<DropdownMenuPrimitives.Item
ref={forwardedRef}
className={cx(
// base
"group/DropdownMenuItem relative flex cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-1 outline-none transition-colors data-[state=checked]:font-semibold sm:text-sm",
// text color
"text-gray-900 dark:text-gray-50",
// disabled
"data-[disabled]:pointer-events-none data-[disabled]:text-gray-400 data-[disabled]:hover:bg-none dark:data-[disabled]:text-gray-600",
// focus
"focus-visible:bg-gray-100 focus-visible:dark:bg-gray-900",
// hover
"hover:bg-gray-100 hover:dark:bg-gray-900",
className,
)}
{...props}
>
<> <--------- new
{children}
{hint && (
<span
className={cx("ml-auto pl-2 text-sm text-gray-400 dark:text-gray-600")}
>
{hint}
</span>
)}
{shortcut && (
<span
className={cx("ml-auto pl-2 text-sm text-gray-400 dark:text-gray-600")}
>
{shortcut}
</span>
)}
</> <--------- new
</DropdownMenuPrimitives.Item>
No response
Honestly, I expected that asChild would use the whole component as input while retaining style, but it just ignores the parent style. But this might be my misunderstanding on how this works.
I wanted to put next.js <Link> inside the <DropdownMenuItem> while retaining style, but this proved more difficult than expected
must be v0.1.1
https://raw.tremor.so/docs/visualizations/tracker
step 1: go to https://raw.tremor.so/docs/visualizations/tracker
step 2: on the small bar in the preview section move your mouse from left to right or right to left as fast as possible
step 3: you might notice the UI issue on the small bar
PFA
The hover on the bar should show the proper value
It is showing some issues with the UI you can refer to the screenshot attached
Chrome
No response
No response
https://raw.tremor.so/docs/ui/tooltip
no error
build failing.
Chrome
No response
I've recently started using tremor-raw.
I love its modern implementation and clean design.
I'm building a dashboard based on this repository:
https://github.com/tremorlabs/template-dashboard-oss
I would like to keep it up-to-date with the daily updates. What's the best way to do this?
Tremor Raw AreaChart [v0.2.3]
not-necessary.com
try to build the component, it throws a lint error because of the use of useEffect inside the tooltip callback, that is around line 762
that it builds fine
it doesnt build as explained in the steps to reproduce
Other
No response
Tremor Raw AreaChart [v0.3.0]
n/a
Followed the steps to add Tremor Raw into my Next.js project and added the default area chart component.
When hovering on the chart the active dot should show.
On hover there is no active dot. When you inspect the browser it shows the fill as transparent.
No response
No response
Tremor Raw ProgressCircle [v0.0.0]
https://raw.tremor.so/docs/visualizations/progress-circle
Notice the cx import is from ./utils which causes a cannot find module error.
The import of cx should be import { cx } from "@/lib/utils"
The import is import { cx } from "./utils"
Microsoft Edge
No response
0.0.0
N/A
The useOnWindowResize hook is using the state value it is setting as part of the dependency array of the useEffect.
This is causing the effect to run on every resize tick causing a maximum update depth exceeded error.
Maximum update depth exceeded not happening on resizes.
Maximum update depth exceeded error on resizing the window.
Other
Browsing though the documentation for Line Chart - Tremor Raw.
// Tremor Raw Checkbox [v0.0.0]
<Checkbox/>
Clicking on checkbox should not shift layout
Checkbox shifts layout
Chrome, Firefox
Fix:
Remove enabled:data-[state=checked]:border-transparent and enabled:data-[state=indeterminate]:border-transparent
Modify CheckboxPrimitives.Indicator by adding asChild
v.0.0.0
None
Adding margin top for exemple to <Input /> breaks the icon alignement
expecting the icon to be centered
Applying the styles to the Input is causing this behaviour the className should be applied to the top parent element of the <Input /> which is the <div className="relative">
No response
No response
Installation instructions for Date Range Picker are missing the following dependencies in the installation instructions:
@internationalized/datereact-statelyreact-ariaInstallation
https://raw.tremor.so/docs/getting-started/installation/next#install-dependencies
On the (Optional) Installation steps on
https://raw.tremor.so/docs/getting-started/installation/next#install-dependencies
https://raw.tremor.so/docs/getting-started/installation/vite#install-dependencies
https://raw.tremor.so/docs/getting-started/installation/remix#install-dependencies
The npm install command does not include @radix-ui/react-dropdown-menu
The command should include @radix-ui/react-dropdown-menu
This causes issues when creating the Dropdown Menu component as import * as DropdownMenuPrimitives from "@radix-ui/react-dropdown-menu"; is not available
Microsoft Edge
No response
Input v0.0.0
https://raw.tremor.so/docs/inputs/input
Click on input
Transistion animation for focus state
No transition
Chrome, Safari, Vivaldi
No response
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.