@tailus/themer-progress
v0.0.1
Published
Progress themes
Downloads
124
Readme
Progress Theme
Overview
The progress component theme is a collection of Tailwindcss utilities that can be used to create progress components with a single variant. Progress components are used to indicate the progress of a task or operation.
Installation
To install the progress component theme, run the following command:
npm install @tailus/themer-progress
Importation
To import the progress component theme, you can use the following import:
import { progress } from "@tailus/themer-progress";
Properties
The progress object contains the following properties:
root
: The Tailwindcss utilities for the root element of the progress component.header
: The Tailwindcss utilities for the header of the progress component.indicator
: The Tailwindcss utilities for the indicator of the progress component. The indicator can have one of the following colors:primary
,secondary
,accent
,danger
,warning
,success
,gray
,gradient
orneutral
.label
: The Tailwindcss utilities for the label of the progress component.message
: The Tailwindcss utilities for the message of the progress component.timer
: The Tailwindcss utilities for the timer of the progress component.
Usage
To use the progress component theme, simply add the appropriate progress
object properties to the progress element and its child elements.
Example
Radix UI
import React from "react";
import * as Progress from "@radix-ui/react-progress";
import { progress as theme } from "@tailus/themer-progress";
const ProgressUI = () => {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
const timer = setTimeout(() => setProgress(32), 500);
return () => clearTimeout(timer);
}, []);
return (
<Progress.Root
className={theme.root + " w-64"}
style={{
// Fix overflow clipping in Safari
// https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0
transform: "translateZ(0)",
}}
value={progress}
>
<Progress.Indicator
className={theme.indicator.primary}
style={{ transform: `translateX(-${100 - progress}%)` }}
/>
</Progress.Root>
);
};
export default ProgressUI;