正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Twitter UI is a beast to style. Responsive is still rough, ended up using grid for the 3 main columns. Using Tailwind CSS and Next JS for components. Will deploy to Vercel when ready

Roy Quilor

1,284 subscribers

65,130 次观看 • 3 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

9 条评论

Lee Robinson 的头像

Lee Robinson3 年前

Looks really good!

Roy Quilor 的头像

Roy Quilor3 年前

Wow, thanks Lee. I have binged on many of your videos

Preston Bourne 的头像

Preston Bourne3 年前

Any chance you’ll upload this to YouTube? Been wanting to pick up tailwind

Roy Quilor 的头像

Roy Quilor3 年前

@saintprestonn Good idea. I will make it

Peer Richelsen — oss/acc 的头像

Peer Richelsen — oss/acc3 年前

YOOO lets turn this into a #nostr client

Roy Quilor 的头像

Roy Quilor3 年前

Hey Peer, I'm not sure what a nostr client is yet, but why not 😂

Hasira 🥃🪴 的头像

Hasira 🥃🪴3 年前

I am just in the process of making my own UI based on twitter and instagram.

Roy Quilor 的头像

Roy Quilor3 年前

Nice, would love to see the progress. Are you using a framework?

Roy Quilor 的头像

Roy Quilor3 年前

Thanks Tiago

相关视频

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic

CodeHagen

16,295 次观看 • 1 年前

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️

shadcn

532,143 次观看 • 3 年前

Introducing Motion UI. White label, production-ready, performance-graded UI components for React. Ready to drop straight into your design via shadcn CLI and Tailwind CSS, or adapt via your agent with our one-click prompt generator or the Motion MCP.

Introducing Motion UI. White label, production-ready, performance-graded UI components for React. Ready to drop straight into your design via shadcn CLI and Tailwind CSS, or adapt via your agent with our one-click prompt generator or the Motion MCP.

Motion

174,184 次观看 • 29 天前

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic

CodeHagen

241,680 次观看 • 1 年前

Oxfmt is in beta for a month now! 🎉 ◆ 100% Prettier conformance for JS/TS ◆ Seamless migration from Prettier via command ◆ Stable import sorting & Tailwind CSS support ◆ and more! Are you using it already? What is your favorite feature?

Oxfmt is in beta for a month now! 🎉 ◆ 100% Prettier conformance for JS/TS ◆ Seamless migration from Prettier via command ◆ Stable import sorting & Tailwind CSS support ◆ and more! Are you using it already? What is your favorite feature?

VoidZero

19,096 次观看 • 4 个月前

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

jhey ʕ•ᴥ•ʔ

386,721 次观看 • 10 个月前

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨

Simon Vrachliotis

127,870 次观看 • 3 年前

Inspired by this tweet and group94 memories, I decided to do rebuild some components using their iconic style / motion / sfx. Here's a Select using Base UI and Motion. Should I build more of this? ps: sound on for the full experience.

Inspired by this tweet and group94 memories, I decided to do rebuild some components using their iconic style / motion / sfx. Here's a Select using Base UI and Motion. Should I build more of this? ps: sound on for the full experience.

Lucas Motta

15,005 次观看 • 6 个月前

Here's an example of how I've been using Executor Artifacts I've got a bunch of random Vercel projects that need clean up, Vercel doesn't have a bulk delete in the dashboard One prompt and I get a UI to manage them, using my existing added Vercel API

Here's an example of how I've been using Executor Artifacts I've got a bunch of random Vercel projects that need clean up, Vercel doesn't have a bulk delete in the dashboard One prompt and I get a UI to manage them, using my existing added Vercel API

Rhys

18,601 次观看 • 22 天前

📣 My newest course is out! 📣 This time we will be building an original SaaS Platform for video calls and summaries with AI Agents 🤖 Are you ready to make 1M ARR 😁? 🤖 Real-time video calls with AI agents 📞 Video and chat powered by Stream 🔐 Authentication handled by Better Auth 💳 Subscription payments via Polar 🧠 AI summaries and context chat using OpenAI ⚙️ Background jobs powered by Inngest 🧑‍💻 Code reviews with CodeRabbit 🗄️ Scalable Postgres database via Neon Postgres 🌐 Built with Next.js 15 and React 19 🎨 Tailwind CSS v4 and shadcn UI for styling 📱 Fully responsive and mobile-friendly 🚀 Ready for production deployment on Vercel

📣 My newest course is out! 📣 This time we will be building an original SaaS Platform for video calls and summaries with AI Agents 🤖 Are you ready to make 1M ARR 😁? 🤖 Real-time video calls with AI agents 📞 Video and chat powered by Stream 🔐 Authentication handled by Better Auth 💳 Subscription payments via Polar 🧠 AI summaries and context chat using OpenAI ⚙️ Background jobs powered by Inngest 🧑‍💻 Code reviews with CodeRabbit 🗄️ Scalable Postgres database via Neon Postgres 🌐 Built with Next.js 15 and React 19 🎨 Tailwind CSS v4 and shadcn UI for styling 📱 Fully responsive and mobile-friendly 🚀 Ready for production deployment on Vercel

Code With Antonio

31,277 次观看 • 1 年前

This is going to change Data Analytics! A Dashboard UI inside the Jupyter Notebook which makes Visualizing Easy! Using just one line of code and is easy to deploy as well!

This is going to change Data Analytics! A Dashboard UI inside the Jupyter Notebook which makes Visualizing Easy! Using just one line of code and is easy to deploy as well!

Sasi 📊📈

92,228 次观看 • 2 年前

🥳 Welp, Flux is HEREEEE! 🚀🚀🚀 Flux is a UI component library for Livewire 🎁 26+ components 💅 Modern design 🌬️ Styled with Tailwind 🤖 Custom, lightweight, JS core ⌨️ Accessibile components Hugo and I have given this project everything we've got. Hope you dig it 🔥

🥳 Welp, Flux is HEREEEE! 🚀🚀🚀 Flux is a UI component library for Livewire 🎁 26+ components 💅 Modern design 🌬️ Styled with Tailwind 🤖 Custom, lightweight, JS core ⌨️ Accessibile components Hugo and I have given this project everything we've got. Hope you dig it 🔥

Caleb Porzio ⚡️

192,885 次观看 • 1 年前

If You're A UI UX Designer, I Just released a video demonstrating how to set up Dark Mode for your designs using Color Variables in Figma And CSS Watch Video Here :

If You're A UI UX Designer, I Just released a video demonstrating how to set up Dark Mode for your designs using Color Variables in Figma And CSS Watch Video Here :

Joseph Brendan

27,056 次观看 • 1 年前

Copy my dashboard - If you want ✨ Done with the dashboard for Propdock - Been using Cursor + v0 for almost the whole project. All components are from shadcn 🐐 ◆ Examples on how to use server actions ✨ ◆ Charts and stuff 📈 ◆ Feel free to copy it if you want 🔥 The project is Open-source so take what you want. Rest of the weekend im going to write issues for the community 🪄 Tech Stack: Vercel NextAuth.js Prisma Postgres shadcn Neon - Serverless Postgres Resend Tailwind CSS v0 #opensource #buildinpublic #proptech

Copy my dashboard - If you want ✨ Done with the dashboard for Propdock - Been using Cursor + v0 for almost the whole project. All components are from shadcn 🐐 ◆ Examples on how to use server actions ✨ ◆ Charts and stuff 📈 ◆ Feel free to copy it if you want 🔥 The project is Open-source so take what you want. Rest of the weekend im going to write issues for the community 🪄 Tech Stack: Vercel NextAuth.js Prisma Postgres shadcn Neon - Serverless Postgres Resend Tailwind CSS v0 #opensource #buildinpublic #proptech

CodeHagen

60,355 次观看 • 1 年前

Honored to be highlighted by for our ultra-realistic, human-sounding voices. We love using to deploy our models, and their service and support is next level 💪

Honored to be highlighted by for our ultra-realistic, human-sounding voices. We love using to deploy our models, and their service and support is next level 💪

lily clifford

160,154 次观看 • 8 个月前

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

171,324 次观看 • 3 年前

the magic of CSS counters ✨ let CSS count your content outside of ordered lists using counters and optional @counter-style reorder/edit DOM content without having to update headings, etc. the styles will update for you 👇

the magic of CSS counters ✨ let CSS count your content outside of ordered lists using counters and optional @counter-style reorder/edit DOM content without having to update headings, etc. the styles will update for you 👇

jhey ʕ•ᴥ•ʔ

143,806 次观看 • 1 年前