# shadcn ui

Published articles for shadcn ui.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## How to Build an AI Chat App Interface With the Vercel AI SDK and Shadcn/ui

DevFeed: [How to Build an AI Chat App Interface With the Vercel AI SDK and Shadcn/ui](<https://devfeed.tech/articles/how-to-build-an-ai-chat-app-interface-with-the-vercel-ai-sdk-and-shadcn-ui-4335.md>)

Original publisher: [Read original article](<https://www.freecodecamp.org/news/how-to-build-an-ai-chat-app-interface-with-the-ai-sdk/>)

Author: Vaibhav Gupta

Published: 2026-09-11T16:21:29Z

Content type: tutorial

Language: en

Sources: [freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More](<https://devfeed.tech/sources/freecodecamp-programming-tutorials-python-javascript-git-more.md>)

Topics: [vercel ai sdk](<https://devfeed.tech/topics/vercel-ai-sdk.md>), [AI Chat](<https://devfeed.tech/topics/ai-chat.md>), [SDKs](<https://devfeed.tech/topics/sdks.md>), [Node.js](<https://devfeed.tech/topics/node-js.md>)

Tags: [ai](<https://devfeed.tech/tags/ai.md>), [app](<https://devfeed.tech/tags/app.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [llm](<https://devfeed.tech/tags/llm.md>), [mcp](<https://devfeed.tech/tags/mcp.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [node](<https://devfeed.tech/tags/node.md>), [openai](<https://devfeed.tech/tags/openai.md>), [react](<https://devfeed.tech/tags/react.md>), [shadcn-ai-chat-app](<https://devfeed.tech/tags/shadcn-ai-chat-app.md>), [shadcn-ui](<https://devfeed.tech/tags/shadcn-ui.md>), [streaming](<https://devfeed.tech/tags/streaming.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [ui](<https://devfeed.tech/tags/ui.md>), [vercel](<https://devfeed.tech/tags/vercel.md>), [vercel-ai-sdk](<https://devfeed.tech/tags/vercel-ai-sdk.md>)

### AI overview

Tutorial for building a streaming AI chat interface in Next.js with the Vercel AI SDK and shadcn/ui.

### Source excerpt

Every other AI product you open today has the same screen: a message list, a text box at the bottom, and words that stream in one token at a time. It looks simple, but it's not simple to build well. Y

## Adding a Checkout to Your v0 App: Next.js + Dodo Payments

DevFeed: [Adding a Checkout to Your v0 App: Next.js + Dodo Payments](<https://devfeed.tech/articles/adding-a-checkout-to-your-v0-app-next-js-dodo-payments-9565.md>)

Original publisher: [Read original article](<https://dodopayments.com/blogs/add-checkout-v0-nextjs-app/>)

Author: Ayush Agarwal

Published: 2026-03-21T00:00:00Z

Content type: tutorial

Language: en

Sources: [Dodo Payments Blog](<https://devfeed.tech/sources/dodo-payments-blog.md>)

Topics: [Next.js](<https://devfeed.tech/topics/next-js.md>), [Vibe coding](<https://devfeed.tech/topics/vibe-coding.md>), [React](<https://devfeed.tech/topics/react.md>), [Tailwind CSS](<https://devfeed.tech/topics/tailwind.md>), [Shadcn UI](<https://devfeed.tech/topics/shadcn-ui.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Back end](<https://devfeed.tech/topics/backend.md>), [Generative AI](<https://devfeed.tech/topics/generative-ai.md>)

Tags: [backend](<https://devfeed.tech/tags/backend.md>), [css](<https://devfeed.tech/tags/css.md>), [developer-tools](<https://devfeed.tech/tags/developer-tools.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [integration](<https://devfeed.tech/tags/integration.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [payment-processing](<https://devfeed.tech/tags/payment-processing.md>), [payments](<https://devfeed.tech/tags/payments.md>), [react](<https://devfeed.tech/tags/react.md>), [shadcn-ui](<https://devfeed.tech/tags/shadcn-ui.md>), [vibe-coding](<https://devfeed.tech/tags/vibe-coding.md>)

### AI overview

A guide to adding Dodo Payments overlay checkout and webhook handling to a v0-generated Next.js application. It explains the gap between v0's frontend generation and the backend logic needed for payment sessions, tax handling, subscriptions, and webhooks.

### Source excerpt

Learn how to add payment processing to v0-generated Next.js apps with Dodo Payments. Complete guide with overlay checkout integration and webhook setup.

## Building the Tools You Wish You Had. The Artisan of the Day Is Mohamed Charrafi.

DevFeed: [Building the Tools You Wish You Had. The Artisan of the Day Is Mohamed Charrafi.](<https://devfeed.tech/articles/building-the-tools-you-wish-you-had-the-artisan-of-the-day-is-mohamed-charrafi-3600.md>)

Original publisher: [Read original article](<https://laravel.com/blog/building-the-tools-you-wish-you-had-the-artisan-of-the-day-is-mohamed-charrafi>)

Author: Ana Tavares

Published: 2025-09-20T15:12:39Z

Content type: article

Language: en

Sources: [Laravel Blog](<https://devfeed.tech/sources/laravel-blog.md>)

Topics: [Laravel](<https://devfeed.tech/topics/laravel.md>), [Livewire](<https://devfeed.tech/topics/livewire.md>), [Developer experience](<https://devfeed.tech/topics/developer-experience.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>), [Shadcn UI](<https://devfeed.tech/topics/shadcn-ui.md>), [Tailwind CSS](<https://devfeed.tech/topics/tailwind.md>), [Vue.js](<https://devfeed.tech/topics/vue.md>)

Tags: [developer-experience](<https://devfeed.tech/tags/developer-experience.md>), [developers](<https://devfeed.tech/tags/developers.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [laravel](<https://devfeed.tech/tags/laravel.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [programming](<https://devfeed.tech/tags/programming.md>), [shadcn-ui](<https://devfeed.tech/tags/shadcn-ui.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>), [vue](<https://devfeed.tech/tags/vue.md>)

### AI overview

Mohamed Charrafi discusses turning personal development problems into open-source tools for the Laravel ecosystem. The article highlights SheafUI, a Laravel and Livewire component library inspired by shadcn/ui, and Converge, an open-source documentation framework. Charrafi also describes learning by studying framework source code and iterating rapidly.

### Source excerpt

Mohamed Charrafi, creator of SheafUI and Converge, shares how solving his own problems turned into open-source projects, raising the bar for Laravel developers.

## Supabase UI: Platform Kit

DevFeed: [Supabase UI: Platform Kit](<https://devfeed.tech/articles/supabase-ui-platform-kit-682.md>)

Original publisher: [Read original article](<https://supabase.com/blog/supabase-ui-platform-kit>)

Author: Saxon Fletcher

Published: 2025-07-14T07:00:00Z

Content type: release

Language: en

Sources: [Supabase Blog](<https://devfeed.tech/sources/supabase-blog.md>)

Topics: [Supabase](<https://devfeed.tech/topics/supabase.md>), [Shadcn UI](<https://devfeed.tech/topics/shadcn-ui.md>), [Tailwind CSS](<https://devfeed.tech/topics/tailwind.md>), [Database](<https://devfeed.tech/topics/database.md>), [Authentication](<https://devfeed.tech/topics/authentication.md>), [paas and iaas](<https://devfeed.tech/topics/paas-and-iaas.md>), [Artificial Intelligence](<https://devfeed.tech/topics/ai.md>), [cloud-computing](<https://devfeed.tech/topics/cloud-computing.md>)

Tags: [ai](<https://devfeed.tech/tags/ai.md>), [api](<https://devfeed.tech/tags/api.md>), [authentication](<https://devfeed.tech/tags/authentication.md>), [components](<https://devfeed.tech/tags/components.md>), [database](<https://devfeed.tech/tags/database.md>), [infrastructure](<https://devfeed.tech/tags/infrastructure.md>), [library](<https://devfeed.tech/tags/library.md>), [platform](<https://devfeed.tech/tags/platform.md>), [shadcn-ui](<https://devfeed.tech/tags/shadcn-ui.md>), [solutions](<https://devfeed.tech/tags/solutions.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>), [ui](<https://devfeed.tech/tags/ui.md>)

### AI overview

Supabase is releasing Platform Kit, a set of Supabase UI Library components for building platforms on top of Supabase. The kit includes database, storage, authentication, and AI components, and supports customizable shadcn/ui and Tailwind CSS styling.

### Source excerpt

We are launching new components in the Supabase UI Library that makes it incredibly easy to build platforms on top of Supabase.

## Top 10 Launches of Launch Week 14

DevFeed: [Top 10 Launches of Launch Week 14](<https://devfeed.tech/articles/top-10-launches-of-launch-week-14-421.md>)

Original publisher: [Read original article](<https://supabase.com/blog/launch-week-14-top-10>)

Author: Wen Bo Xie

Published: 2025-04-04T07:00:00Z

Content type: article

Language: en

Sources: [Supabase Blog](<https://devfeed.tech/sources/supabase-blog.md>)

Topics: [Supabase](<https://devfeed.tech/topics/supabase.md>), [MCP](<https://devfeed.tech/topics/mcp.md>), [Model Context Protocol](<https://devfeed.tech/topics/model-context-protocol.md>), [dashboards](<https://devfeed.tech/topics/dashboards.md>), [Databases](<https://devfeed.tech/topics/databases.md>), [SQL](<https://devfeed.tech/topics/sql.md>), [Artificial Intelligence](<https://devfeed.tech/topics/ai.md>), [Latency](<https://devfeed.tech/topics/latency.md>), [Shadcn UI](<https://devfeed.tech/topics/shadcn-ui.md>), [Claude](<https://devfeed.tech/topics/claude.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>), [Docker](<https://devfeed.tech/topics/docker.md>)

Tags: [claude](<https://devfeed.tech/tags/claude.md>), [configuration](<https://devfeed.tech/tags/configuration.md>), [cursor](<https://devfeed.tech/tags/cursor.md>), [data](<https://devfeed.tech/tags/data.md>), [errors](<https://devfeed.tech/tags/errors.md>), [integration](<https://devfeed.tech/tags/integration.md>), [latency](<https://devfeed.tech/tags/latency.md>), [launch](<https://devfeed.tech/tags/launch.md>), [load-balancer](<https://devfeed.tech/tags/load-balancer.md>), [mcp](<https://devfeed.tech/tags/mcp.md>), [mcp-server](<https://devfeed.tech/tags/mcp-server.md>), [openai](<https://devfeed.tech/tags/openai.md>), [release](<https://devfeed.tech/tags/release.md>), [shadcn-ui](<https://devfeed.tech/tags/shadcn-ui.md>), [sql](<https://devfeed.tech/tags/sql.md>), [stripe](<https://devfeed.tech/tags/stripe.md>), [third-party](<https://devfeed.tech/tags/third-party.md>), [tooling](<https://devfeed.tech/tags/tooling.md>)

### AI overview

Supabase highlights ten launches from Launch Week 14, including dashboard-based Edge Function deployment, scalable database-triggered Realtime Broadcast, routing Data API requests to the nearest read replica, a Supabase UI Library, an official MCP server, declarative database schemas, Clerk Auth integration, and a Postgres Language Server. The supplied text does not include the full details of the final launches.

### Source excerpt

Highlights from Launch Week 14

## Introducing the Supabase UI Library

DevFeed: [Introducing the Supabase UI Library](<https://devfeed.tech/articles/introducing-the-supabase-ui-library-681.md>)

Original publisher: [Read original article](<https://supabase.com/blog/supabase-ui-library>)

Author: Ivan Vasilov; Jonny Summers-Muir; Saxon Fletcher; Terry Sutton

Published: 2025-03-31T07:00:00Z

Content type: release

Language: en

Sources: [Supabase Blog](<https://devfeed.tech/sources/supabase-blog.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [passwords](<https://devfeed.tech/topics/passwords.md>)

Tags: [authentication](<https://devfeed.tech/tags/authentication.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [passwords](<https://devfeed.tech/tags/passwords.md>), [react](<https://devfeed.tech/tags/react.md>), [release](<https://devfeed.tech/tags/release.md>), [shadcn-ui](<https://devfeed.tech/tags/shadcn-ui.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>), [ui](<https://devfeed.tech/tags/ui.md>)

### AI overview

Supabase announces an official UI library of customizable, shadcn/ui-compatible components for React-based applications. It includes components for authentication, file uploads, and realtime features.

### Source excerpt

Drop complex components into your projects in seconds.

## ethereum.org Cycle 1 Roadmap Adopts Six-Week Shape Up Development Cycles

DevFeed: [ethereum.org Cycle 1 Roadmap Adopts Six-Week Shape Up Development Cycles](<https://devfeed.tech/articles/from-quarters-to-cycles-accelerating-ethereum-org-17132.md>)

Original publisher: [Read original article](<https://blog.ethereum.org/en/2025/01/23/cycle-1-ethereum-org>)

Author: Digital Studio

Published: 2025-01-23T00:00:00Z

Content type: article

Language: en

Sources: [Ethereum Foundation Blog](<https://devfeed.tech/sources/ethereum-foundation-blog.md>)

Topics: [Website](<https://devfeed.tech/topics/website.md>), [Development](<https://devfeed.tech/topics/development.md>), [Documentation](<https://devfeed.tech/topics/documentation.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Shadcn UI](<https://devfeed.tech/topics/shadcn-ui.md>), [web design](<https://devfeed.tech/topics/web-design.md>)

Tags: [cycles](<https://devfeed.tech/tags/cycles.md>), [design](<https://devfeed.tech/tags/design.md>), [development](<https://devfeed.tech/tags/development.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [ethereum-org](<https://devfeed.tech/tags/ethereum-org.md>), [shadcn-ui](<https://devfeed.tech/tags/shadcn-ui.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ui-components](<https://devfeed.tech/tags/ui-components.md>), [web-design](<https://devfeed.tech/tags/web-design.md>), [website-design](<https://devfeed.tech/tags/website-design.md>)

### AI overview

ethereum.org describes its first Shape Up cycle, using six-week build periods followed by two-week cooldowns. The roadmap covers interactive educational content, audio support, native Web3 features, documentation updates, translation improvements, Shadcn UI migration, server components, and related ecosystem projects.

### Source excerpt

We're evolving how we build ethereum.org. Starting January 20th, we've adopted Shape Up cycles - focused 6-week build periods followed by 2-week cooldowns. For Cycle 1, each project below will ship by the end of February - no automatic rollovers to next cycle. Quick point of clarification: this is...

## Why we built @neondatabase/toolkit

DevFeed: [Why we built @neondatabase/toolkit](<https://devfeed.tech/articles/why-we-built-neondatabase-toolkit-5859.md>)

Original publisher: [Read original article](<https://neon.com/blog/why-neondatabase-toolkit>)

Author: David Gomes

Published: 2024-09-27T15:49:18Z

Content type: article

Language: en

Sources: [Blog -- Neon Docs](<https://devfeed.tech/sources/blog-neon-docs.md>)

Topics: [AI Bots](<https://devfeed.tech/topics/ai-bots.md>)

Tags: [agents](<https://devfeed.tech/tags/agents.md>), [ai](<https://devfeed.tech/tags/ai.md>), [ai-agents](<https://devfeed.tech/tags/ai-agents.md>), [api](<https://devfeed.tech/tags/api.md>), [autoscaling](<https://devfeed.tech/tags/autoscaling.md>), [http](<https://devfeed.tech/tags/http.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [postgres](<https://devfeed.tech/tags/postgres.md>), [product](<https://devfeed.tech/tags/product.md>), [react](<https://devfeed.tech/tags/react.md>), [shadcn-ui](<https://devfeed.tech/tags/shadcn-ui.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>), [vercel](<https://devfeed.tech/tags/vercel.md>)

### AI overview

Neon introduced @neondatabase/toolkit, a unified SDK intended to make Neon capabilities easier for AI agents to use. It consolidates existing API-client and serverless packages and plans higher-level support for branching, autoscaling, and connection choices.

### Source excerpt

We recently published a package on NPM called @neondatabase/toolkit (@neon/toolkit on JSR). The idea behind it was to merge the already existing @neondatabase/api-client and @neondatabase/serverless packages into a single SDK that is easier for AI agents to consume. AI agents do...