Hello folks!

This week shadcn ships @shadcn/lint, an agent-first linter for Tailwind design systems, plus a cn update and a batch of new registry components. You've also got Preethi animating border-image, David Bushell fixing full-bleed CSS and John Rhea trimming a keyframes orbit.

Let's dive in šŸ‘‡

šŸŒŸ News

@shadcn/lint

shadcn shipped @shadcn/lint, an agent-first linter for Tailwind v4 design systems. Six rules (no-restyle, no-raw-colors, no-arbitrary-values, no-inline-styles, no-unknown-classes, require-static-classes) read your components, variants, and theme, then tell the agent what broke and what to use instead. Works on ESLint and Oxlint, React, Vue, and Svelte. shadcn/ui is optional. Better Stack has a walkthrough.

cn 0.4.0

cn, the tailwind-merge and clsx replacement from #229, is up to 0.4.0. Point cn build or the Vite and Next.js plugins at your Tailwind CSS entry with the new css option, and they pick up the scales from your @theme blocks. A custom class like rounded-card now conflicts like a default one, so you can drop the hand-written config.

tailwind-strict-colors

tailwind-strict-colors is a new VS Code extension for Tailwind v4 projects. It reads the --color-* tokens in your @theme and flags classes like bg-red-500 that pull from the default palette instead. A Quick Fix swaps in the nearest token from your theme, and a workspace scan lists hits by file. Version 0.1.0 ships as a .vsix on GitHub releases.

New components in the shadcn ecosystem

Several registries shipped new pieces this week, and you can pull any of them in with the shadcn CLI.

  • @react-bits: PaperCrumple, FlipCard, TearTicket, Shredder, DitherVeil, TechText, and ElectricLogo. The Micro set is now installable from the CLI registry too.
  • @vue-bits: catches up on the Micro registry with BellToggle, FlipCard, PaperCrumple, TearTicket, and more.
  • @assistant-ui: elements-task, task-card, and agent-status for showing what your agent is doing and for how long.
  • @nuqs: parser-uuid, which parses and validates UUIDs (v1 to v8) in the query string.
  • useLayouts 2.0: a redesigned browse page plus a batch of new registry components, like a wheel carousel, checkout and cart drawers, and a holographic referral card.

šŸ¤© Windy Picks

Cozy Watch ā€” GitHub notifications in your Mac menu bar

Cozy Watch is an open-source macOS app that pings you when a pull request, review, mention, or CI run needs you. Click through and you land on the PR that changed, and the menu bar shows your current PR status. It's free for personal use, with a $29/year license for work that comes with a 30-day commercial trial. macOS 12 or later.

Download Cozy Watch, free for personal use

šŸ“š Learning

Animating CSS border-image

You want a border that draws itself on hover without a separate SVG sprite. Preethi on CSS-Tricks animates border-image with a registered custom property so a linear or conic gradient fills the frame. She also plays with border-image-slice and border-image-outset. One catch: border images do not follow curves.

Fixing full-bleed CSS

Full-bleed with 100vw still crops a few pixels once a classic scrollbar shows up. David Bushell walks through Andy Bell's utility, scrollbar-gutter: stable, then a container-query fix with a registered --body-size so nested containers keep the bleed honest.

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)

John Rhea on CSS-Tricks cuts a 141-line moon-orbit keyframes block down to 28 lines. Drop the repeated loops, split translate and scale into their own properties, and let the browser interpolate the midpoints with ease-in-out.

šŸ’… Showcase

Social Fetch

Social Fetch is a social media scraper API with 232 endpoints across 23 platforms. One key and one JSON schema cover profiles, posts, transcripts, and metrics, with live data on every request so you are not maintaining scrapers yourself.

šŸŽ Resource

mapcn

If you want maps that feel like the rest of a shadcn stack, mapcn is a copy-paste React kit on MapLibre, styled with Tailwind. Run pnpm dlx shadcn@latest add @mapcn/map, drop in free CARTO tiles with light/dark switching, and own the component after paste. Drop to the raw MapLibre instance when you need more control.

šŸ‘Œ Cool Stuff

Tiiny Host ā€“ Drag and drop an HTML file, PDF, or zipped static site and get a shareable link with free SSL in seconds.

Tinycast ā€“ Native Mac launcher under 100 MB with clipboard, calculator, snippets, and Raycast extension support, no Electron or account.

HTTP Toolkit ā€“ Open-source HTTP debugger for Windows, Linux, and Mac with one-click intercept, live edit, and mock responses.

Promptwatch ā€“ Tracks brand mentions and citations across ChatGPT, Gemini, Claude, and Perplexity for GEO and AI search.

Do you want to share something with the Tailwind CSS community?
You can submit a link or message me on Twitter @vivgui.

Want to support the newsletter? You can buy me a coffee with this link šŸ˜.