Theo's Typesafe Cult•3y ago

What does Preline UI actually do?

I'm trying to get my stack together for my next project. I've been using MUI + CRA for a while and I would like to try to rewrite it with better underlying tech. Theo mentioned DaisyUI and Preline UI for styling components and Headless UI for giving components reasonable behaviors. I've been experimenting with all of them so far I've concluded: - Headless UI seems very cool and immediately useful - DaisyUI is OK, but I was disappointed with customizing the components. Some of their css classes have high specificity so I couldn't override them in tailwind without adding ! in a lot of places. Their animations also seemed to not work with Headless UI. The library also seems to try to do more than just styling by how it uses hidden checkboxes to control components like accordions. I'm confused because that seems like it would go against Theo's Venn diagram from his video. - All that said, Preline UI is the one I'm most confused about. Their website seems to just have a bunch of normal tailwind classes. I can just copy / paste them into my code and they work fine. So what am I actually getting when I npm install preline ? And do people usually build basic UI styles (like buttons, textboxes, etc) themselves? Thanks

5 Replies

benten•3y ago

pretty sure with preline one of the devs logs into your github repo and manually styles your components for you

Tom•3y ago

Oh sick

Unknown User•2y ago

Message Not Public

royanger•2y ago

If you look at stuff in Preline that would need/use JS, like the Modal component, there are a couple of things in the sample code that don't immediately jump out. Take the below code, which is the Modal component stripped of all Tailwind classes. The hs-basic-modal from the data attrib in the button and the id in the div create a pair and is that makes the button work to open the modal.

<button type="button" data-hs-overlay="#hs-basic-modal">
  Open modal
</button>

<div id="hs-basic-modal" class="hs-overlay"></div>

<button type="button" data-hs-overlay="#hs-basic-modal">
  Open modal
</button>

<div id="hs-basic-modal" class="hs-overlay"></div>

As a note, you can visit https://www.preline.co/plugins.html and install just the parts that require JS. At this point you're now working Preline in the same way you would Headless UI.

Unknown User•2y ago

Message Not Public

Gaming

Programming

What does Preline UI actually do?