Design6 min
Designing motion that feels inevitable
Springs, easing and the small details that make an interface feel alive instead of animated.
Sep 28Read
Search
Search components and blocks
Blog Blocks
Editorial sections for articles, posts and updates.
Blog Section
Open pageA blog grid with capsule category tabs. The tabs reuse the motion Tabs component with a sliding pill; switching category filters the grid with a layout animation, so remaining cards glide into their new slots while others scale out and new ones spring in. Cover photos fade in from a blur as they load, zoom slowly on hover, and each card lifts with a spring while its arrow nudges forward.
From the blog
Notes on design, engineering and shipping.
Engineering8 min
How we built a shared-layout tab bar
A walkthrough of layoutId, spring tuning and why the pill never teleports.
Sep 21Read
AI7 min
Shipping agents your users can actually trust
Progress, approvals and honest status lines: the UI patterns behind reliable AI agents.
Sep 14Read
Product4 min
Roadmap: what is landing this quarter
New blocks, a faster docs site and a handful of templates you have been asking for.
Sep 09Read
Design5 min
Color systems that survive dark mode
Tokens first, hex never. How we keep every component themeable from one stylesheet.
Aug 30Read
Engineering9 min
Streaming UI without the jank
Batching state, stable keys and cheap animations for long-running generations.
Aug 22Read
Install
$ pnpm dlx shadcn@latest add @ditherui/blog-section
Props
PropTypeDefault
className / ...section propsReact.ComponentProps<"section">—One story takes the spotlight: a full-bleed cover with a slow settle-in zoom, a pulsing Featured tag and a staggered text reveal. The rest wait in a strip of numbered cards below. Click any of them and it is promoted into the spotlight with a blur crossfade, while the previous feature drops into the strip with a spring.
FeaturedDesign · 6 min read
Making space for work that matters
Why we are choosing fewer distractions, clearer decisions and a little more breathing room in the tools we build.
JCJamie ChenSep 24, 2026
Read storyProps
PropTypeDefault
className / ...section propsReact.ComponentProps<"section">—A reading-list feed: author line, bold headline, a two-line standfirst and a thumbnail, split by hairlines. Like and Save are live: the heart pops with a spring while its count rolls to the new number, and the bookmark drops into place and feeds a badge on the Saved tab. Switching between the underline tabs blurs the current list out and the next one in, its rows resolving one after another (the same reveal plays on first render), un-saving on the Saved tab slides the story out, and hovering a row dims the rest so you can focus on one.
MKMira Kapoor· Aug 23
How I prepared for 50 engineering interviews and landed the offer
The study loop, the mistakes, and the one habit that actually moved the needle.
9 min read4
NBNoah Brandt· Apr 6
Design systems are dead. Long live design tokens
Why shipping a component library is not the same as shipping a system.
6 min read362
SASofia Alvarez· Sep 1
What should programmers do while the AI writes the code?
Hint: not start another coding loop.
5 min read87
ECEthan Cole· Sep 17
Motion is a feature, not a finish
Treating animation as part of the interaction model instead of a coat of paint.
7 min read41
Props
PropTypeDefault
className / ...div propsReact.ComponentProps<"div">—A blog grid that opens into a full article page. Click a card and its cover grows into the article hero with a shared-layout transition, the headline and paragraphs resolve in one after another. Back returns to the grid. Posts carry their own body, so swap in your CMS data.
From the blog
Click a story to read it.
Props
PropTypeDefault
postsPost[]four sample postsclassNamestring—