A verification code is six slots in shadcn, so plan paste and submit
A verification-code field looks like one input. In shadcn it is an InputOTP built from slots, and the paste behavior comes with the component, so th…
Latest Web news from Tech News
All topics
AI
agents
ai
api
architecture
automation
backend
beginners
career
database
devchallenge
devops
discuss
javascript
linux
llm
machinelearning
mcp
opensource
performance
productivity
programming
python
react
security
showdev
testing
tutorial
typescript
webdev
shadcn's select marks errors on the trigger, so wire validation there
A native select is a browser control, so validation rules attach to it directly. A shadcn select is a styled trigger with a list behind it, so the e…
Does a design system change what a coding agent writes?
A while ago I finished a piece of work I was proud of: a design system built the way I'd argue a design system should be built. Tokens as data. Comp…
7 Years of Chakra UI: The Journey from 0 to 6.1 Million Monthly Downloads
Phewww! Where did all the time go? This September makes it 7 years building Chakra UI! We've gone from 0 to 6.1 Million Monthly Downloads in a year.…
Screenshot testing a design system with Playwright and Docker
I work on the Koobiq design system, which has component libraries for React and Angular . in this article I'll show how the screenshot tests in our…
Component Metadata as a Source of Truth for a Design System
A design system starts drifting long before anyone notices a broken component. The first warning signs are usually quieter. The website says a compo…
The Tragedy of Software Versioning
Software versioning goes far beyond SemVer. A practical guide to CalVer, marketing versions, lockstep releases, pain indexes, and compatibility wind…
AI Can Generate More UI. Who Keeps It Consistent?
AI can now generate UI faster than many teams can review it. Describe a component to a coding model and, a few minutes later, you may have: an imple…
Building Design Systems That Ship: A Design Engineer's Framework
TL;DR: Most design systems fail because they're designed in isolation. Build design systems that ship by designing backwards — start with constraint…
I audited 20 design systems for spacing drift. Here is what your team can use from it.
Nobody on your team chose 13px. Someone pasted it. Someone nudged 12px until a border lined up. A coding agent produced it because nothing told it y…
Wrapping Component Libraries
How production libraries handle decoupling, and what I learned building my own wrapper layer The Pattern Everyone Uses (But I Didn't Understand) Eve…
Simulating Capillary Action in a WebGL Shader for a UI Press Effect
Most "ink spreading" effects on the web are the same three ingredients: a radial-gradient , a blur filter, and an opacity transition on a timer. The…
How I Built a Production-Ready Design System With Claude Code, Mobbin, and Penpot
I started a new series on my channel on Claude Code to help you understand and use it confidently, and in this video, I show you how to build a prod…
The Story of My Failed Design System
Originally published at https://blog.joonquixote.com/en/posts/the-story-of-my-failed-design-system/ . There are plenty of articles about design syst…
Structuring Variables in Figma
Building a scalable UI library in Figma starts with thoughtful organization of variables. As projects grow, managing primitives, semantics, and them…
What if you don't have to build a login page again?
How do you usually build a login page in an application? The first project Imagine you are working on a project that needs a login page. Let's call…
Stop Fighting CSS Grids: Building Complex Responsive Layouts Without Losing Your Sanity
We’ve all been there. You map out a gorgeous, asymmetric layout on your artboard—clean overlapping cards, precise whitespace, and dynamic visual anc…
The Fastest Way I’ve Found to Build a Solid UI Without a Designer
Over the years, I have built new products, redesigned existing ones, worked without a designer, and worked with designers who could only give the te…
My theme build fails if any color misses WCAG contrast — here's the pipeline
Korean temples and palaces have been painted with the same mineral pigment system — dancheong (단청) — for about 1,500 years. Deep indigo woodwork, ci…
See your app on every screen size at once
Yey. I made Tessera because resizing DevTools and hoping I caught every breakpoint was wasting my time. You get a canvas of live browser tiles at re…
Your Loading Spinner Has an Emotional Job. Is It Doing It?
Most of us treat design systems as a functional problem: consistent colors, consistent spacing, consistent components. That part's solved for most t…
Design systems for startups
A design system sounds like something you earn later — a luxury for companies big enough to have a design-systems team. For a startup that's exactly…
BEM Methodology in CSS: predictable naming for clean styles
Why BEM? As frontend projects grow, CSS quickly turns fragile—poor class names cause style collisions, debugging pain, and slow iteration. BEM gives…
DRY is not for UI
When we talk about UI, we almost always start by thinking about small components we can reuse across the frontend. And of course we can't reuse ever…
Introducing Arvia: a design system compiler for the web
Introducing Arvia Arvia is a design system compiler. You describe your tokens, themes, and components in .arv files, and a compiler turns each one i…
Why AI Keeps Generating the Wrong Design Tokens and How I Fixed It with Figma's API
AI design system output is approximate by default. Wrong border radii, raw hex values, inconsistent tokens across 60 components. The fix isn't bette…
Design Tokens vs Atomic CSS: A Failed Integration and the Path to Harmony
A personal developer's attempt to map design tokens to UnoCSS failed the same day. But it resulted in a set of pragmatic boundaries. This article co…
How We Shipped more than 60 Design System Components in 5 Weeks Using Figma as the Single Source of Truth
We estimated 300 engineer-days. We shipped in 35 days with 3,077 tests and zero raw hex values. Here's the pipeline I built to make Figma the litera…
I Asked AI to Fix My UI 20+ Times. The Problem Wasn't My Prompts.
The feature was done. Everything worked. I opened the browser, looked at the page, and thought: it's functional, but it's just... off. So I did what…
Design to Code #8: The Cosmetics of Modularity
It was sometime in early April. Version 0.1.0 had been sitting on npm for maybe twenty-four hours. I was clicking through the documentation site I'd…