Dynamic CSS for Components

Jose Verdin · 2025-07-31T00:17:26.093+00:00

Hello all! I am running into a knowledge roadblock on NordCraft.I've create a simple tab button component for a tab based navigation element on an app I'm building (see image). I've created a component attribute "is-active" which will do some cool things like hide the text if it's set to FALSE. My question is: is there a way to have this same component attribute change css styles based on the "is-active" value? What I'm hoping to accomplish is to change the background color of the anchor element to a color of my choice if that attribute is set to TRUE. However, I have not found a way to make this happen. I've tried the anchor element attributes and adding a attribute connected to the "is-active" attribute but that doesn't work.I've tried messing around with classes and the anchor element attributes. I did have an idea of creating a div set to absolute that fills up the whole anchor element and then showing it and hiding it based on the "is-active" component attribute but that feels like the wrong way to build components out. I'm still on lesson 3 of the new learning series but my gut tells me this may not be covered yet in the lessons.I come from a Webflow background so I'm trying to wrap my head around how NordCraft approaches things. Any help or guidance on how I can best achieve what I'm hoping for?

Jose Verdin

1 month ago

Hello all! I am running into a knowledge roadblock on NordCraft.

I've create a simple tab button component for a tab based navigation element on an app I'm building (see image). I've created a component attribute "is-active" which will do some cool things like hide the text if it's set to FALSE. My question is: is there a way to have this same component attribute change css styles based on the "is-active" value? What I'm hoping to accomplish is to change the background color of the anchor element to a color of my choice if that attribute is set to TRUE. However, I have not found a way to make this happen. I've tried the anchor element attributes and adding a background attribute connected to the "is-active" attribute but that doesn't work.

I've tried messing around with classes and the anchor element attributes. I did have an idea of creating a div set to absolute that fills up the whole anchor element and then showing it and hiding it based on the "is-active" component attribute but that feels like the wrong way to build components out. I'm still on lesson 3 of the new learning series but my gut tells me this may not be covered yet in the lessons.

I come from a Webflow background so I'm trying to wrap my head around how NordCraft approaches things. Any help or guidance on how I can best achieve what I'm hoping for?
✅1
Jay Campbell

1 month ago

You can do whatever you want with attributes and classes, all that matters is the formula that triggers the class.

So on your anchor, go to classes in the attributes panel, and create one called “active” (for example), and in the formula for it set it to is-active = true.

Then go to your anchor, in the styles section of the style panel you’ll press the plus and in the classes dropdown you’ll find the .active class and set your styles there.
❤️1
Does that answer your question?
Andreas Møller

1 month ago

We don’t have a way to style based on attributes yet, but you can add a class
As Jay said
Jose Verdin

29 days ago

@Jay Campbell Thank you Jay! This is exactly what I was hoping to achieve! This functionality opens up a lot of amazing potential for creating dynamic styles.
@Andreas Møller Yet? That's awesome that the functionality is planned. It's also pretty cool how the founder is on here answering questions as well. Thank you Andreas!
🔥1
@Jose Verdin
@Jay Campbell Thank you Jay! This is exactly what I was hoping to achieve! This functionality opens up a lot of amazing potential for creating dynamic styles.
@Andreas Møller Yet? That's awesome that the functionality is planned. It's also pretty cool how the founder is on here answering questions as well. Thank you Andreas!
Jay Campbell

29 days ago

Happy to help! I’ve got a YouTube playlist that covers most of the basics of Nordcraft if you want to check it out:

https://youtube.com/playlist?list=PLX94MzamM2j22G4F97R8S7xY3dqYs5rGO&si=dq0pYvTiESWNqIDk
Jose Verdin

28 days ago

@Jay Campbell Thanks Jay! I will definitely check this out. Do you have any videos on how to best handle SVG icon swapping within components? It would be cool to be able to switch icons around based on component attributes but I have not been able to figure it out yet. The only caveat is that I want to ensure the icons can be filled in dynamically as well.
@Jose Verdin
@Jay Campbell Thanks Jay! I will definitely check this out. Do you have any videos on how to best handle SVG icon swapping within components? It would be cool to be able to switch icons around based on component attributes but I have not been able to figure it out yet. The only caveat is that I want to ensure the icons can be filled in dynamically as well.
Jay Campbell

28 days ago

For that, you create a component that has all the icons you want to use that accepts a “name” attribute.

Then you can show/hide each icon based on their respective name. Ex: show home svg if name = home.

You can then use this in other components. If you want to change the icon from that component you would just need to create another “name” attribute and pass it to the icon component.
Jay Campbell

28 days ago

I can create a short video if you need visual representation. 😎
Jose Verdin

28 days ago

That would be amazing! One thing I'm worried of: would every single icon load on the parent component? Or would it be just the one shown? I fear that all icons load every single time, thus reducing app performance.
Lucas G

28 days ago

Yes, it would load them all
😯1
Jay Campbell

28 days ago

If you’re going to have that many components you might want to use the slot feature instead and pass the svg that way.
💯1
Jay Campbell

28 days ago

Docs: https://docs.nordcraft.com/components/compositions#slots
Jose Verdin

28 days ago

Thanks for the doc Jay. Am I correct to assume that if I create a slot and add an icon in there externally, then I can no longer use the component attributes to fill it in and style that external icon?
Jay Campbell

28 days ago

You can turn the svg into a component. 😎
Lucas G

28 days ago

You can have defaults which are overridden by whatever you put into the slot
Jay Campbell

28 days ago

Oh, I thought he was talking styling, not overriding.
Lucas G

28 days ago

No, I'm just saying he could have a few default icon components
And still be able to add in other ones into the slot whenever needed
If you have elements in a slot but the slot isn't used then the elements in it are used instead by default. I do that for dropdowns for example
When the trigger is almost always a button but I can still drop in something else whenever I need the trigger to be just an icon for example
Lucas G

28 days ago
That button is there by default then I can override it whenever I needsomethign else to be the trigger
Could have a couple 'default' icon components is what I meant
And still be able to use other ones
That's all I meant, sorry lol
Jay Campbell

28 days ago

Bouta make a video on this right today. 🤣 I need to get back into creating so this would be a good start. 😎
Jose Verdin

28 days ago

Thanks Jay! I think a video on how to handle icons would be beneficial for people coming over from Figma, Webflow and other frameworks that simplify icon management. I still don't know what best practices are with web dev stuff since I'm coming from these platforms with no formal training.

I think I was able to pick up what you guys were putting down! I did the following:
1. Created a slot within my main-navigation-tab component
2. Within that component, placed a placeholder icon component. It passes through size and fill color as an attribute
3. Back on homepage, I added a different icon component to the slot in the main-navigation-tab component and set its fill attribute to currentColor and size attribute to 24.
4. I ensured to select the slot the new external component is filling as the same slot that the placeholder component is using.
4. The css class styling in the main-navigation-tab component passes down to the child icon component and changes fill color!

This allows me to externally swap out icon components as needed and then have them be styled dynamically too!
👍1
🔥1
Tod

28 days ago

Great job @Jose Verdin! Your contribution to the Nordcraft Community just made you advance to Community Level 2! 🌲
Lucas G

28 days ago

what do you mean by placeholder icon component
Jay Campbell

28 days ago

Lookin good. Just you know you can name slots as well. Extremely helpful if you have components that utilize multiple slots.
@Lucas G
what do you mean by placeholder icon component
Jose Verdin

28 days ago

Inside the main component, I placed slot. Inside that slot I placed an icon component that is essentially a placeholder until it is replaced by an icon component added externally.
@Jay Campbell
Lookin good. Just you know you can name slots as well. Extremely helpful if you have components that utilize multiple slots.
Jose Verdin

28 days ago

Thanks Jay! This will indeed be very helpful as complexity goes up!
Jay Campbell

28 days ago

My pleasure, here's the video if interested: https://youtu.be/WQBMpthp7p4
Jose Verdin

27 days ago

Just gave it a watch. Great stuff, thank you 🙏
💜1

Dynamic CSS for Components

Jose Verdin

Jay Campbell

Andreas Møller

Jose Verdin

Jay Campbell

Jose Verdin

Jay Campbell

Jay Campbell

Jose Verdin

Lucas G

Jay Campbell

Jay Campbell

Jose Verdin

Jay Campbell

Lucas G

Jay Campbell

Lucas G

Lucas G

Jay Campbell

Jose Verdin

Tod

Lucas G

Jay Campbell

Jose Verdin

Jose Verdin

Jay Campbell

Jose Verdin