Birbla

Join the discussion

Write your take first — we'll ask for email only when you're ready to publish.

Sign in
  • Hacker News
  • What is shadcn?
    by imcritic
  • default UI of the internet
    by icemelt8
  • The key piece of the stack it gives you is sensible cross-platform component behaviors to put your styling / branding on to of.
    by stravant
  • A customizable component library built on radix.

    Not sure why this upsets people, is it because it's popular and therefore bad?

    by ramon156
  • A set of components to build web UIs out of

    https://ui.shadcn.com/

    by QuantumNomad_
  • The Bootstrap of the 2020s. Just the default components people copy-paste into Tailwind-based SaaS apps.
    by rafram
  • The infinite scroll makes it difficult to reach the links in the footer, at least on mobile.

    Footer links:

    GitHub repo https://github.com/miketromba/shadcn-themer

    Three other links also in the footer but they only bring me to login screen:

    Terms of Service https://shadcnthemer.com/terms

    Privacy policy https://shadcnthemer.com/privacy

    Contact https://shadcnthemer.com/contact

    by QuantumNomad_
  • I still can't believe this is still an issue. When lazy-loading/infinite-scroll appeared main problem was that your footer shouldn't contain any actionable information. And people still makes fall into the same issue years after.
    by lardissone
  • The only changes I see are colors but what if I want eg a different border radius on buttons or margin on labels or specific fonts on elements etc? I don’t find changing only the colors of components particularly valuable but would like to see more variance in the actual shapes and looks of things.
    by jzig
  • Global border radius is editable, that setting is at the bottom of the sidebar. The challenge with global shadcn theming is that you're limited to adjusting the css variables they provide. I believe there is a global spacing variable, but it is not so specific that you can target e.g. just label spacing. That would be something you could modify directly within your shadcn input components via adjusting the tailwind class(es).
    by miketromba
  • Not related to this directly, but shadcn drawer is built on the top of vaul which is unmintained, so who ever use this in production, keep this in your mind.
    by sreekanth850
  • Gotta love the JS ecosystem where devs move faster than users.
    by rochak
  • Thanks for sharing! What's the difference between your app and tweakcn?

    edit: would also love to be able to open preview on new tabs with middle-click.

    by slig
  • Link: https://tweakcn.com/editor/theme
    by lyu07282
  • Tweakcn is a great tool too. Main difference is I'm hoping ShadcnThemer will be more of a community-driven hub for sharing, starring, and forking themes - similar to how color palette websites have 1000's of user-made palettes. (I took this approach when building the Theme Studio for VS Code and it worked really well, 1000's of themes were designed and shared.)

    Tweakcn also charges $ users to be able to share and save themes which I think is silly for a tool like this, should be 100% free and open source.

    I also prefer the simple UX of ShadcnThemer better but I'm biased of course.

    by miketromba
  • I spent some time attempting to "derive" a theme given a primary and secondary color, but realized my color theory wasn't strong enough to build something reliable (I tried with both hsl and oklch). Curious if that's really possible.
    by programmarchy
  • >Sign in or create an account with your email

    Into the trash it goes.

    by meindnoch
  • That's unfair. You can browse, preview and get the CSS variables without signing up.
    by slig
  • I get this. Just shipped the ability to create and edit themes locally, no auth required. The local theme gets persisted to localstorage and you can optionally save/share it later. It also works seamlessly with the fork / import features, so those can be used without auth as well.
    by miketromba
  • I tried to open different themes in tabs for comparison, but I would have to first open each one and then manually copy the URL into a new tab because you implemented your links as <button> (which prevents both middle-click and 'open in new tab' context menu option to work).
    by lavela
  • Yup, this is the incompetence that we see all over the place since these new frameworks have come and front end devs have no idea what HTML actually is or how it works.

    Buttons are for submitting forms and nothing else.

    In HTML a link is created using an <a> element.

    React has a <Link> element for this purpose, it will be rendered as <a>.

    Please OP, at least try to learn a little bit about the underlying technologies.

    by tacker2000
  • Just shipped a fix, middle-click should work now. Thanks for the feedback
    by miketromba