Shadcn components in skeleton

[gzuuus]

Hi! I was exploring the shadcn-svelte library when I started to think if it would be possible to use shadcn components together with skeleton. Has anyone already done it? Is it crazy, or does it make sense?
Thanks in advance

[endigo9740]

NOTE: I wrote this original post thinking the request was pairing Skeleton + Shadcn (for React). See my follow up post below for Svelte.

Hey Gzuuus, if you haven't already I'd take a look at what's coming with Skeleton Next (aka Skeleton v3). We're devoting a ton of effort to accomplish the following:

• Making components optional, if you prefer to just use the theme system, Tailwind utilities, etc
• Direct support for React, including dedicated React components
• A much more robust theme system, with the Cerberus theme being highly inspired by Vercel and Shadcn
• Proper integration guides for using Skeleton with "headless" component systems (ex: Radix, Headless UI, etc)

The long and short of it is, it's likely possible to integrate some portions of Skeleton v2 with Shadcn, but it's not something we officially support. But this approach will be the forefront of v3.

I will note v3 is still in development, but you can at least get an early preview on the doc site here:
https://next.skeleton.dev/

[zadamg]

• A much more robust theme system, with the Cerberus theme being highly inspired by Vercel and Shadcn

Is it possible to get this added to the current skeletonui themes in the meantime? I want to be able to transition to something more standard (ie. the shadcn theme), but I don't know how to do it without challenging changes to postcss and possibly other things.

would be awesome to have this as a default theme.

[endigo9740]

@zadamg as mentioned above, the cerberus theme in Skeleton v3 represents our take on the Vercel Geist and Shadcn aesthetic. It's the default theme for our v3 documentation site, and you can compare to other available theme using the theme picker at the top-right of the page.

Here's what it looks like on the doc site with a subtle background gradient applied:

And here's what it looks like without said gradient (the default presentation when you use it):

If you don't like the exact colors or options we used, then we recently launched our new v3 Theme Generator, which provides a means to import any canned theme and further refine and modify it to your heart's content.
https://themes.skeleton.dev/themes/import

Keep in mind, Skeleton is not trying to be Giest or Shadcn, we're just trying to provide a flexible design system that can represent many different styles and aesthetics. The theme will get you a lot of the way there, but it's not the end all be all solution.

[zadamg]

Thanks, @endigo9740! The theme explorer/importer doesn't offer any shadow section to change the depth of various items - is there an intent to add this?

[endigo9740]

Remember themes are just CSS Custom Properties (CSS Variables), but you can only get so far by tweaking variable values. In most apps, we expect folks to use themes as their foundation, but still build up from there. Refining with global or local CSS styles until everything looks how you want it. Also keep in mind we're building on top of Tailwind, so their utility-first methodologies still apply.

For example, you could create your own utility class like so:

.primary-shadow-lg { @apply shadow-lg shadow-primary-500/50; }

This would consume one of the theme properties (the primary color), but generate a utility class you can use on demand:

<button class="btn preset-filled-primary-500 primary-shadow-lg">Button</button>

Then you have a simple/generic/opt-in way to extend and refine your UI throughout your application.

[endigo9740]

That said, I do want and hope for the Theme Generator options to evolve and grow. If shadows make sense, we'll aim to include those in a future update. We just have to be cautious as we don't want to "break" everyone's theme too often. Those kinds of large impactful changes will likely come as part of major releases.

[riziles]

@gzuuus , Don't try to install shadcn-svelte in a Skeleton project! It overwrites your tailwind.config.ts and app.postcss and generally wreaks havoc on everything. That said, shadcn-svelte is built on bits-ui and that works GREAT inside a Skeleton project. I've used the bits datepicker in a Skeleton project, and the integration was so smooth.

[endigo9740]

Thank you Riziles, I just now realized they were talking about shadcn-svelte not the original Shadcn for React! My bad!

A lot of what I mentioned above should still be relevant, and we're definitely interested in showing how to integrate Skeleton v3 with more headless Svelte component systems too. That includes Bits and Melt!

[riziles]

LOL. I figured. Just trying to save @gzuuus from making the same mistake I did!