How to Modify DaisyUI Radial Progress to Have a Straight Line Cap

Jasser Mark Arioste

Jasser Mark Arioste

How to Modify DaisyUI Radial Progress to Have a Straight Line Cap

In one of my projects I use DaisyUI component library for its speed and flexibility. And in one of my react components, I had to use DaisyUI radial progress however I didn't like the rounded line caps for the default radial progress components. In this tutorial, we're going to modify daisyUI radial progress component to have a straight line cap as shown below.

How to Modify DaisyUI Radial Progress to Have a Straight Line Cap

How does DaisyUI implement the rounded line cap? #

In order to implement the straight line cap, first we have to ask ourselves how does daisyUI implement the rounded line cap so that we can make the correct modifications.

Upon closer  inspection,  the radial-progress class has 2 pseudo-elements, before and after which are the target elements for the radial-progress class. The radial-gradient and inset properties are causing the curved or rounded linecaps.

Inspecting radial-progress::before class
Inspecting radial-progress::after class

Creating the utility classes for a straight line cap #

We have to make modifications to these two pseudo-elements. In our globals.css file let's create two classes:


@tailwind base;
@tailwind components;
@tailwind utilities;

.radial-progress.radial-square::before {
  #just remove the radial-gradient background to remove the start line cap
  background: conic-gradient(currentColor calc(var(--value) * 1%), #0000 0);

.radial-progress.radial-square::after {
  #just unset the inset to remove the end line cap
  inset: unset;

Usage #

Usage is very simple, we just add radial-square class to an element with  radial-progress class.

  className="radial-progress radial-square text-primary"
  style={{ "--value": 75 }}

There you have it. We have the following output:

DaisyUI radial progress with straight line cap

Conclusion #

We've successfully modified DaisyUI radial progress to create a straight line cap. One important thing to note is we have to understand the component first before we made modifications. I'd say it's one of the skills that great developers have, so if you come across situations like these in the future, be sure to investigate the code first and do your modifications after. 

If you like tutorials like these, please consider signing up to our newsletter below.

Credits: Image by Julius Silver from Pixabay

Share this post!

Related Posts


This content may contain links to products, software and services. Please assume all such links are affiliate links which may result in my earning commissions and fees.
As an Amazon Associate, I earn from qualifying purchases. This means that whenever you buy a product on Amazon from a link on our site, we receive a small percentage of its price at no extra cost to you. This helps us continue to provide valuable content and reviews to you. Thank you for your support!
Donate to ReactHustle