Hello folks!

Zard UI hits 1.0, Maizzle 6.2 lands, and there's a fresh batch of shadcn components. Stefan Bauer lazy-loads YouTube embeds with nothing but <details>, Max Prilutskiy rounds up eight HTML elements you're probably skipping, and Vite+ wraps your whole toolchain in one CLI.

Let's dive in šŸ‘‡

šŸŒŸ Community News

Zard UI hits 1.0

Zard UI, the shadcn/ui alternative for Angular, is out of beta. v1.0.0 landed on Oct 8 after 134 betas, and it adds two components: Attachment, for files and images, and Aspect Ratio.

Maizzle v6.2.0

Maizzle 6.2 adds definePreviewProps, so you can feed sample data to a template in the dev server, and createMaizzle, which lets you reuse one renderer across renders. It also warns you now when a <style> tag fails to compile.

mdxcn joins shadcn-labs

mdxcn is a set of Markdown-friendly React components you copy into your app, shadcn-style, with charts and diagrams drawn in text glyphs instead of SVG or canvas. It moved under shadcn-labs on Oct 6, and an Oct 2 update added nine components, including Chat, Env, Endpoint, Keys, FAQ, and two new graphs.

New components in the shadcn ecosystem

Five registries shipped new pieces this week.

  • @react-bits: HoloCard and CrystalizedBall.
  • @beui: a voice orb, a directional arc picker, a morphing aspect ratio, animated collapsible and alert, and status bar, volume profile, and treemap charts.
  • @reui v2.7.0: Signature Pad and Time Picker primitives with free examples, plus three new Pro block categories (Tiptap rich text editor, Excalidraw whiteboard, and DevOps).
  • shadcn-svelte: Questionnaire and MessageScroller, plus a new @shadcn-svelte/primitives package.
  • @remocn: 31 transcript-driven caption styles for Remotion videos.

šŸ¤© 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

Performance-Optimized Video Embeds with Zero JavaScript

Stefan Bauer lazy-loads YouTube iframes with <details> and <summary>. The thumbnail sits in the summary, and the player only loads once someone clicks. In his tests it beat lite-youtube-embed on load time, LCP, and transfer size, with zero JavaScript shipped.

HTML5 Elements You Didn't Know You Need

Max Prilutskiy rounds up eight native elements that replace a chunk of JavaScript, from <dialog> modals and <details> accordions to <datalist> autocomplete, <meter>, <output>, and <time>. Each one comes with copy-ready code and a note on its limits, like not being able to style <datalist> options.

JavaScript Operators you should know

Chris from Coding in Public walks through &&, ||, and ?? in a 10-minute video, then moves on to the logical assignment versions: &&=, ||=, and ??=. His tokensRemaining: 0 example shows why you want ?? over || when zero is a valid value.

šŸ’… Showcase

Vite+

Vite+ is a unified toolchain that bundles Vite, Vitest, Rolldown, tsdown, Oxlint, Oxfmt, and Vite Task behind one vp CLI. You get vp dev, vp check, vp test, and vp build, plus Node.js and package manager management, and vp migrate for existing Vite projects.

šŸŽ Resource

emailcn

If you've ever hand-coded table layouts for an email, this one's for you. emailcn is a free, MIT-licensed set of email components for React Email, MJML React, and JSX Email that you install with the shadcn CLI, like npx shadcn add @emailcn/react-email/image-grid-hero. You get heroes, pricing, product lists, order summaries, and more, with built-in themes like Vercel, Linear, and Stripe. The code lands in your project, so you can tweak every block.

šŸ‘Œ 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.

Nushell ā€“ Cross-platform shell where pipelines pass structured data, so you filter and sort tables instead of parsing strings, with JSON, YAML, SQLite, and Excel support built in.

Upscayl ā€“ Free, open-source desktop app for Linux, macOS, and Windows that upscales images up to 16x with AI, with batch mode and multiple models.

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 šŸ˜.