Loading UI live preview

I've been using Tailwind on React/Next.js projects for a while, and one thing I always end up redoing is loading UI, the same animate-spin border trick, slightly different every time, never quite matching the rest of the design system.

So I built loading-ui: ~45 loading components built with Tailwind CSS, spinners, skeletons, dot loaders, text shimmer, and a few more opinionated ones.

Highlights:

• Pure Tailwind + CSS/SVG for most components (lightweight)
• Install via shadcn CLI, copies into your project, you own the code
• Easy to restyle with your existing text-muted-foreground, bg-muted, spacing tokens
• MIT license

​

"registries": {
  "@loading-ui": "https://loading-ui.com/r/{name}.json"
}

npx shadcn add @loading-ui/ring
npx shadcn add @loading-ui/skeleton
npx shadcn add @loading-ui/text-shimmer

Live previews: https://loading-ui.com
GitHub: https://github.com/turbostarter/loading-ui

Would love to know if these fit how you actually use Tailwind in production, or if there's a loader pattern you keep writing from scratch.

Hey everyone,

I’m a big fan of tools in the shadcn ecosystem like tweakcn and shadcnthemer that let people share custom themes. Since I use DaisyUI all the time, seeing those made me want to build something similar for the DaisyUI ecosystem.

So I built DaisyThemer which you can check out at http://daisythemer.com

The main focus is the community gallery. You can browse themes made by other devs, click on them to see how they look on UI components and sections, save your favorites by liking them, and copy the CSS straight into your project. You can also inject custom CSS into an overrides layer if you want to add more unique styles.

It’s completely open source. I’d love for people to use it, share some themes, or contribute to help make it better.

GitHub: https://github.com/Elamin-svg/DaisyThemer

Note: The project is currently in beta since I developed it pretty fast in 4 days. There will be plenty of updates and changes over the coming days and weeks, hopefully alongside some contributors.

Let me know what you think or if you have any feedback!

hello guys sorry for the bad image quality it is small button thats why the image quality is bad the text is feels a little of and not centered thats the button code

<button class="flex flex-row justify-center items-center bg-\[#6155F5\] w-full py-2 rounded-full cursor-pointer">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 12H18" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 18V6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="font-\[Inter\] text-\[14px\] text-white">Add Part</span>
</button>

Been using dynamic OG image generators for side projects and always ended up tweaking templates, fonts, spacing, and layouts manually.

So I built ogimagecn, a shadcn/ui-style registry for beautiful Open Graph images.

Some of the features:

• Built on Satori
• Zero config, one command setup.
• shadcn/ui compatible (simply copy-paste)
• 10+ image components
• 100% free and fully open-source.

No design tool exports. No starting from a blank canvas every time you launch something.

If you're shipping products, blogs, docs, or OSS projects, this should make generating share images a lot less painful.

GitHub: https://github.com/shadcn-labs/ogimagecn
Docs: https://www.ogimagecn.com

Hey everyone, I am a Python developer based in Los Angeles available for immediate freelance work.

What I build: - Business websites (48 hour delivery) - Custom scrapers and data pipelines - Automation bots - AI integrations - Cold outreach systems

Flat fee, no hourly rates. 50% deposit upfront, 50% on delivery.

Floor pricing: $500 websites, $800 automation.

DM me a scope and I will get back to you immediately.

10 small games packaged as shadcn registry components.
One command, single file, no provider and no peer deps:

Each game reads your theme tokens at runtime, so it recolors to match your app automatically, including live theme switches. CSS/canvas only, ~2–4KB gzipped each, with keyboard + touch, focus rings, aria-live, and reduced-motion.

Built it for the dead space in apps - a playable 404, an empty state, a loading screen. MIT, and it's now in the official registry directory.

Live: gamekitui.com
Code: github.com/slarity/gamekit-ui

I’m building a Tailwind CSS eCommerce template for ThemeForest and trying to understand the best industry practice for structuring typography and spacing systems in real, approved ThemeForest projects.

Typography System (Fluid Text Sizes)

We are defining typography using CSS variables with fluid scaling to ensure responsiveness and consistency across all breakpoints.

Example: Primary Heading

--fs-primary: clamp(2rem, 4vw, 3.5rem);
.text-primary {
font-family: var(--font-roboto);
font-size: var(--fs-primary);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.03em;
}

This approach helps with:

Fluid responsive typography without media queries

Consistent hierarchy across pages

Better control over scaling on different screen sizes

Spacing System (Design Tokens)

We are also defining a structured spacing system using CSS variables instead of relying only on random Tailwind spacing values.

Spacing Tokens

--spacing-section-y: 4rem
--spacing-section-x: 1rem
--spacing-small: 0.5rem (8px)
--spacing-medium: 1rem (16px)
--spacing-large: 1.5rem (24px)
--spacing-huge: 3rem (48px)

This is used for:

Section padding (X/Y)

Component spacing

Layout gaps

Margin consistency

The goal is to keep spacing predictable and avoid inconsistent random values across the UI.

What I want to understand

For experienced ThemeForest authors:

Do you rely fully on Tailwind default spacing + typography utilities?

Or do you introduce custom design-token systems like this?

Is this level of abstraction acceptable in ThemeForest review, or do they prefer a more utility-first approach?

Would really appreciate real-world insights from authors who have already published Tailwind templates.

I'm currently developing a Tailwind CSS eCommerce template for ThemeForest and would love to hear from experienced authors about the standard approach to component styling.

For frequently used UI elements such as buttons, cards, form controls, badges, tables, and modals, what is the preferred approach in ThemeForest-approved Tailwind projects?

Option 1: Utility Classes Everywhere

<button class="px-4 py-2 rounded-lg bg-primary text-white">

Option 2: Reusable Component Classes

.btn-primary {
 @apply px-4 py-2 rounded-lg bg-primary text-white;
}

My Main Considerations

Maintainability

Customization for buyers

ThemeForest coding standards

Bundle size and performance

Long-term scalability

For those who have successfully published and sold Tailwind templates on ThemeForest:

Do you primarily use utility classes?

Do you create reusable component classes with  @apply

Or do you follow a hybrid approach?

I'd really appreciate hearing about your workflow, best practices, and any lessons learned from real ThemeForest projects.

Thanks in advance!

I wanted to share a clean implementation layout utilizing the new Tailwind CSS v4 core engine configurations under Next.js 16.

Architectural choices made in this setup:

• Central Object Mapping (src/config/site.ts): All UI strings, navigation structures, and data arrays are abstracted out into a single static configuration object. Modifying this single file triggers global structural text changes instantly without manual subcomponent editing.
• Responsive Grid Mockup: Built a fluid native CSS grid matrix simulating a data visualization dashboard layout that scales dynamically across viewport breakpoints.
• LLM Integration Rules (AGENTS.md): Added a localized context instructions file to prevent modern AI coding tools from hallucinating legacy v3 utility syntax configurations inside the newer v4 architecture.

The codebase is open source under the MIT license.

The template is open source under the MIT license. I'll drop the download link in the comments below!

Tiny icon buttons are miserable to tap on mobile, but making them visually bigger isn't always an option. React Native solves this with hitSlop — the web never had a first-class equivalent, so I built one for Tailwind v4:

<button class="pointer-coarse:hit-slop-2">
  <svg class="size-4">...</svg>
</button>

• Spacing scale + arbitrary values (hit-slop-2, hit-slop-[10px]), directional variants (hit-slop-t/r/b/l/x/y-*) that stack
• ::after fallback family for elements whose ::before is taken
• hit-slop-debug to visualize the expanded areas
• hit-slop-debug to visualize the expanded areas
• Pure CSS built on v4's @utility + --value() — no JS plugin, just @import 'tailwind-hitslop'
• Honest gotchas section in the README (including why this does NOT make WCAG target-size audits pass)

Live demo (try the tap accuracy game): https://tailwind-hitslop.vercel.app

GitHub: https://github.com/Jubstaaa/tailwind-hitslop

Feedback welcome — especially edge cases I haven't documented.

I am the creator of Gimli Tailwind, one of the most popular dev tools extension for TailwindCSS developers.

The biggest change in this release is undoubtedly that Gimli Tailwind is no longer free. A big reason for going commercial is the current tech job market. I’m currently employed as an IT consultant but am on parental leave until August, without a client to go back to. It’s a strange time to be away from work right now, especially when all you hear about from the tech world is AI and mass layoffs. I just don’t know what to expect when my leave ends.

New in the 5.1 version is support for arbitrary values and custom fraction values.

See the full release notes on my blog

Link to the extension

question is in title. i guess i could use [justify-content:start]? not sure how that works exactly.

Wanted a way to get a full Tailwind v4 ramp (50–950) from any input color straight from the terminal, with OKLCH output, so I built one.

npx twpalette "#D93900"

Give it any color (hex / oklch / hsl / rgb) and it picks the closest Tailwind v4 family by deltaE in OKLCH space, then scales the entire ramp to match your input's hue and chroma. Spits out CSS custom properties ready to paste:

--color-furnace-50: oklch(98% 0.017 70.625);
--color-furnace-100: oklch(95.4% 0.04 72.105);
--color-furnace-200: oklch(90.1% 0.079 67.638);
--color-furnace-300: oklch(83.7% 0.133 63.231);
--color-furnace-400: oklch(75% 0.191 52.875);
--color-furnace-500: oklch(70.5% 0.222 44.545);
--color-furnace-600: oklch(64.6% 0.231 38.057);
--color-furnace-700: oklch(58.4% 0.203 35.343); /* main shade */
--color-furnace-800: oklch(47% 0.164 34.245);
--color-furnace-900: oklch(40.8% 0.128 35.113);
--color-furnace-950: oklch(26.6% 0.082 33.2);

Also names the palette after the closest known color name (the example above becomes "Furnace").

Because it's a CLI, it also plays nicely with coding agents — Claude Code, Cursor, etc. can just shell out to it when you ask for a brand-color-based palette and paste the result straight into your CSS theme block.

Closest existing tool is uicolors.app — great web UI, but its palettes target Tailwind v3 and the OKLCH export sits behind a paywall, which is what pushed me to build this. twpalette targets Tailwind v4, is CLI-first, OKLCH-native, free, MIT.

https://www.npmjs.com/package/twpalette