Introducing Kibo UI Patterns.
1000+ @shadcn examples for use in your project.
Every component. Every variant. Every state.
Completely free.
Link ๐
Hayden Bleasel
5,592 posts
Hayden Bleasel
@haydenbleasel
Member of Technical Staff @OpenAI. Prev @Vercel @PalantirTech. Building ultracite.ai / files-sdk.dev
00:00
AI Elements are new beautifully designed React components for the AI SDK. Open source and built on shadcn/ui, they're easy to integrate and fully customizable.- I've had a lot of people ask me how to build components properly. How do you think about things like composition, polymorphism, slots, data attributes and accessibility? It's a lot to figure out. ๐ฆ That's why @shadcn and I have teamed up to create componentsโคbuild โ the
- Introducing โฒ Streamdown A drop-in replacement for react-markdown, designed for AI-powered streaming. npm i streamdown (or just use AI Elements!) Link ๐
00:00 - โฒ @vercel Streamdown 1.1 by is out! Featuring some awesome updates and community contributions ๐
- I bring these two files into every single JS project I start. Is there a better way? ๐ค
- My @shadcn course is live on Vercel Academy! Its designed to take you from zero to shipping production-ready UI components. You'll understand not just how to use shadcn/ui, but how it works, how to extend it, and how to create your own components. Link ๐
- Introducing Roadmap UI โ a collection of composable, open source components for building interactive roadmaps built on @shadcn/ui. Inspired by best-in-class tools like @linear, @Jira and @planepowers; originally built for eververse.ai. roadmap-ui.com/?ref=x-1
- โจ I'm unbelievably excited to introduce Ultracite v5: the AI-ready formatter that helps you write and generate code faster. ๐ Zero-config โก Lightning fast ๐ค Designed for humans and AI ๐ช Maximum type safety ๐ Plays nice with others Here's the TL;DR ๐๐งต
00:00 - Introducing Kibo UI Blocks โ a new series of @shadcn inspired blocks for building interfaces with Kibo components! Copy and paste into your app. As always, open source and free forever. Here's a list of blocks we're launching with ๐๐งต
00:00 - Every one of my projects starts with the same 4 commands. โจ What else do I need?
- if you like directives you won't BELIEVE what we're cooking up for next.js 17
Workflow Dev Kit: reliability-as-code โข "๐๐๐ ๐ ๐๐๐๐๐๐๐ " + "๐๐๐ ๐๐๐๐" โข Open source and MIT-licensed โข Designed for AI agents and backends โข Backend-agnostic (Vercel or self-hosted) โข Framework-agnostic (Next.js, Nitro & more) useworkflow.dev 
- Dropping a new @shadcn component for the first time in a while! Introducing the Stories component โ create your very own stories UI like Facebook or Instagram. Link ๐๐งต
00:00
