Sam Selikoff @samselikoff Twitter profile

Last Seen Profiles

@luxurybitches

@matter_cats

@PauSanmartin5

@JacquezGreen

@su_teramoto

@sound_souler

@smutoro

@narinechalabi

@Ky_psj

@JN1884

@siomaru_nico

@AndieDebar69223

@Tyler_Greever

@stevebrookstein

@skar_anders

@chuu_Ivr

@hitsmakerstudio

@ni_na_yotu

@PBInvesting

@bmbeautiful2025

@NotJustFootgirl

@pepsi_nala

@naadan_charakk

@Halpal134

@TheCartelDel

@soraflopp

@RestoinRJulia

@BlacccourageOxx

@surpermoti

@asmeofficial

@suzuki002a

@sugar_aki_

@sugashinobu

@IAMPINKMONI

@syatikunogobou

@aka_themamba

Sam Selikoff

@samselikoff

2 years

I just rebuilt Apple Music on iOS using React and Framer Motion. This app is a treasure trove of tiny, beautiful details and I wanted to break down everything I noticed along the way. Let's get started!

86

439

4K

Sam Selikoff

@samselikoff

1 year

that is... not a lot of code

34

169

3K

Sam Selikoff

@samselikoff

1 year

My Framer Motion course is complete! In 3 hours you'll build six demos and walk away with some awesome techniques you can start using today. 🪄 Below I want to share my favorite animation takeaway from each lesson!

47

220

2K

Sam Selikoff

@samselikoff

7 months

these are getting better and better

Antonio Sarosi

@antoniosarosi

7 months

It's the year 2024 Next.js 15 introduces "use electronics"

143

1K

9K

36

102

2K

Sam Selikoff

@samselikoff

3 years

This Headless UI docs site is the best-looking site I've ever worked on 😇

19

86

2K

Sam Selikoff

@samselikoff

1 year

listen y'all I know this doesn't matter but.. it's an async function. you export it. you even say it like that when you're talking with someone – "you export an async function called action". why not just write it like that?!

100

78

1K

Sam Selikoff

@samselikoff

4 years

🚀 Super excited to announce that @MirageJS is now officially launched! It's already being used in React, Vue, Angular and Ember projects, and even with frameworks like Nuxt and Gatsby! Check out our brand new homepage to learn all about it 👉

44

358

1K

Sam Selikoff

@samselikoff

6 months

i can't with this

18

86

1K

Sam Selikoff

@samselikoff

2 years

Haven't used npm-check-updates in a while, really love this screen. Exactly the defaults I'd want too 👍 Still wish something like this was built into npm but this isn't bad at all!

20

116

1K

Sam Selikoff

@samselikoff

1 year

Airbnb-inspired calendar built with React, date-fns and Framer Motion 🪄

25

55

1K

Sam Selikoff

@samselikoff

3 years

normalize script comments

43

71

1K

Sam Selikoff

@samselikoff

2 years

In React, all we have is rendering. This simple mental model gives us a small API surface area, which is what so many love about React, but also creates a host of issues that every team runs into. One of those has to do with the Halting problem.

13

113

957

Sam Selikoff

@samselikoff

1 year

mix-blend-mode: exclusion 🤝 framer motion easy peasy lemon squeezy

23

51

908

Sam Selikoff

@samselikoff

1 year

When building a Reset Password form, once the user enters their new password is there a reason not to log them in immediately? It seems like most sites take you to the login route where you have to log in again, but a few log you in automatically which seems like a better ux.

95

30

800

Sam Selikoff

@samselikoff

5 years

Workin' on something new ✍️

31

65

750

Sam Selikoff

@samselikoff

2 years

when your primitives are so good you no longer need libraries 🪄

14

21

727

Sam Selikoff

@samselikoff

2 months

✍️ New blog post: "Instant Search Params with React Server Components" The result of my three-week obsession with React's new useOptimistic hook — ultimately leading me to a much richer understanding of React transitions. Hope you enjoy!

28

79

655

Sam Selikoff

@samselikoff

2 years

having fun with this new login screen 😽

20

13

642

Sam Selikoff

@samselikoff

6 months

it's undeniably compelling

39

35

623

Sam Selikoff

@samselikoff

1 year

Simple little example showing a spotlight effect. Built with Framer Motion + Tailwind CSS. Coming to YouTube this week!

17

31

615

Sam Selikoff

@samselikoff

1 year

TypeScript wizards: channel is defined on line 9 but possibly undefined on line 12. Any idea why?

165

34

598

Sam Selikoff

@samselikoff

10 months

Ever felt confused at a carefully designed loading state that flashes too quickly? Use Promise.all to add a minimum artificial delay, without penalizing your user 👇

17

43

589

Sam Selikoff

@samselikoff

1 year

gradient borders are so hot right now Built with Tailwind + multiple backgrounds — thank you background-clip!

17

29

582

Sam Selikoff

@samselikoff

11 months

Stoked to be a part of Tailwind’s first in-person event!!

14

11

561

Sam Selikoff

@samselikoff

1 year

mask-image is one hell of a drug!

11

21

552

Sam Selikoff

@samselikoff

2 years

Vercel just published a standalone version of my Next.js Conf talk on Nested Layouts! Check it out if you want a condensed intro to React Server Components, nested layouts, dynamic route segments, and data loading in Next.js 13 ☺️

Sam Selikoff: Improving developer and user experience with nested...

Get an inside look at how nested layouts with Next.js 13 can improve your user and developer experience with Sam Selikoff, Founder of Build UI.Deploy now: ht...

www.youtube.com

12

61

535

Sam Selikoff

@samselikoff

1 year

Just posted a new recipe: Spotlight! A subtle hover treatment with a radial gradient that follows your mouse. Uses Framer Motion to update the gradient's position outside of React's render cycle.

17

48

538

Sam Selikoff

@samselikoff

3 years

Getting hyped for this docs site to go live tomorrow!!

13

35

508

Sam Selikoff

@samselikoff

1 month

✍️ New post: "Global progress in Next.js" Learn all about React Transitions, play with tons of interactive demos, and see how even something like a global progress bar can benefit from composability!

16

59

500

Sam Selikoff

@samselikoff

9 months

Picked up this awesome trick from @adamwathan – Responsive animations with Framer Motion using Tailwind prefixes to tweak CSS Variables at different breakpoints 😎 YouTube video coming today!

14

33

479

Sam Selikoff

@samselikoff

9 months

Some fun <Highlight> examples coming this week!

6

21

474

Sam Selikoff

@samselikoff

8 months

Threw up a little recipe on how to animate a number with Framer Motion:

8

50

459

Sam Selikoff

@samselikoff

1 year

Simple pattern for organizing utility classes. Useful when your component can be in more than two states. From Lesson 15 of Tailwind Mastery, free on Build UI this week!

33

38

458

Sam Selikoff

@samselikoff

11 months

Tailwind Mastery is now fully complete over on Build UI, clocking in at 2h 29m across 21 lessons! Here are some of my favorite things I learned while building the course:

7

28

450

Sam Selikoff

@samselikoff

9 months

This week I learned Framer Motion can animate the content of a motion.div. Here's a simple <Counter> component. It even works with Server Components!

11

33

447

Sam Selikoff

@samselikoff

1 year

27 minutes of Radix + Framer Motion comin' your way!

20

17

447

Sam Selikoff

@samselikoff

1 year

Been meaning to do this for a while, just made a YouTube playlist with all of my Framer Motion videos! 17 videos ready for your binging pleasure 🍿

8

45

444

Sam Selikoff

@samselikoff

7 months

If you've ever wanted a better understanding of how HTTP Sessions and Cookies work, here's Lesson 11 from my Remix course in its entirety. Remix is great for learning this since you can write both the client and server parts in the same file. Enjoy!

9

38

417

Sam Selikoff

@samselikoff

3 years

New video – 8 Tips to Make Your Website Feel Like an iOS App

18

54

408

Sam Selikoff

@samselikoff

9 months

Remix is a great way to understand how HTTP Sessions work. Problem: HTTP is stateless, so how do you associate data from one request (like an email and password) with subsequent requests? Solution: Cookies. They're durable and included in all future requests. That's a Session.

11

34

406

Sam Selikoff

@samselikoff

5 months

New recipe: Animated Toast Radix UI + Framer Motion made this a breeze!

9

36

402

Sam Selikoff

@samselikoff

9 months

Animated tabs that support any combination of active/inactive colors or treatments 🎨 ...no effects, state, or motion values needed, thanks to nested layout animations! More details 🔜

12

26

392

Sam Selikoff

@samselikoff

8 months

Put together some highlights from my Tailwind Connect live-coding talk! Here's 6 cool things you can do using modern Tailwind:

10

36

388

Sam Selikoff

@samselikoff

1 year

php 🤝 js

11

5

390

Sam Selikoff

@samselikoff

11 months

Someone pointed out Discord and Linear use contenteditable for the text boxes, presumably to support things like @-mention functionality. Any info or guides out there on how to properly build contenteditable-divs-as-inputs?

54

10

381

Sam Selikoff

@samselikoff

7 months

Here's a video introducing Radix Themes – the newest project from the folks at @radix_ui !

13

32

381

Sam Selikoff

@samselikoff

2 years

Check out the Apple Music clone here: And see the full source code here:

GitHub - samselikoff/ios-apple-music-clone

Contribute to samselikoff/ios-apple-music-clone development by creating an account on GitHub.

github.com

2

20

380

Sam Selikoff

@samselikoff

7 months

In DHH's latest keynote he says that even React is coming back around to the benefits of sending HTML to the browser rather than JSON, with the advent of Server Components. It's a common misconception – RSC actually can't render HTML. Hoping my Next Conf talk will clear this up!

20

23

369

Sam Selikoff

@samselikoff

2 years

I always forget to make sure "floating" elements are brighter. Makes a huge difference!

7

8

366

Sam Selikoff

@samselikoff

2 years

Just shipped a History feature on my fitness app and even after years of working with it I'm completely blown away by how easy Hasura, GraphQL and date-fns made this. 200 lines of code, all frontend. Zero new server code. An absolute dream.

16

6

361

Sam Selikoff

@samselikoff

1 year

Cooked up a lil index page for all our code recipes 🧑‍🍳 More coming soon!

9

15

347

Sam Selikoff

@samselikoff

11 months

Here's a button everyone's made: flashing loading state that depends on latency of operation, layout shift, and ambiguity about whether operation was successful

10

18

335

Sam Selikoff

@samselikoff

2 years

So so cool... applies the new @media (hover: hover) feature to all `hover:*` Tailwind classes 🤌💋 No more annoying sticky hover state after tapping a link on mobile! MDN: caniuse:

10

41

335

Sam Selikoff

@samselikoff

2 years

I think I've figured out a sneaky way to animate tables. Since you can't set height: 0 on <tr> els, you usually just "hold space" while they fade out. (Left) But if you fix the col widths, you can make the <tr> absolute, then layout animation will take care of the rest! (Right)

3

27

328

Sam Selikoff

@samselikoff

6 years

The result of my month-long love affair with @tailwindcss : an autogenerated styleguide/reference for all your app's Tailwind classes. 👉 To learn more about this and other cool functional css stuff, check out my upcoming @EmberConf training:

10

55

329

Sam Selikoff

@samselikoff

11 months

Been a while since I’ve done some live coding on stage - always a fun time! The Tailwind team did a great job making the event both classy and casual 👌 I had a blast!

13

328

Sam Selikoff

@samselikoff

1 year

New recipe: Animated Counter Grab the code from my video on animating a number in response to React state changes with Framer Motion!

7

27

324

Sam Selikoff

@samselikoff

4 years

Next.js is just insane tech.

14

15

320

Sam Selikoff

@samselikoff

1 year

I'd take a humble junior developer who's willing to listen over a more experienced developer with an ego any day 👍

24

19

321

Sam Selikoff

@samselikoff

8 months

Suspense is just so freaking cool. By far my favorite addition to React since Hooks.

Ryan Toronto

@ryantotweets

8 months

Just published a Build UI recipe for this <Await> component. Absolutely love using this!

6

14

127

8

21

319

Sam Selikoff

@samselikoff

7 months

I've used useCallback maybe once or twice in the last 3 years, never useMemo 🤷‍♂️ And every time I've seen them when pairing/consulting we've always refactored them out always-rerender is the beauty, heart & soul of React!

kitze 🚀

@thekitze

7 months

hey useMemo and useCallback can useGoFuckThemselves for real. writing code like this is pure torture and we're gonna laugh about it one day

117

82

2K

29

21

317

Sam Selikoff

@samselikoff

1 year

Anyone know why the default target in new Next.js apps is es5 instead of es6?

21

12

309

Sam Selikoff

@samselikoff

1 year

haha man, these new react aria components are so freaking tender and juicy check this out – I can style the dang keyboard interactions on cancellation! all with tailwind. awesome stuff. coming to youtube this week!

3

15

314

Sam Selikoff

@samselikoff

9 months

Here's a video I made with the team from @radix_ui introducing one of my favorite libraries. Hope you enjoy!

8

29

309

Sam Selikoff

@samselikoff

6 months

iOS-inspired slider built on Radix. Gets all the keyboard nav, a11y attributes, and even an updating <input value={} /> for free!

4

13

313

Sam Selikoff

@samselikoff

6 years

Recently I noticed Lodash's repo had 0 open issues. As an OSS maintainer I found this fascinating because Lodash is tremendously popular, and keeping issues down is notoriously difficult.

5

79

310

Sam Selikoff

@samselikoff

1 year

keep getting nerd sniped by framer motion questions i don't understand how anyone could not love hooks. can't beat this code!!

8

16

303

Sam Selikoff

@samselikoff

4 years

New video: Building my first Next.js app

12

36

302

Sam Selikoff

@samselikoff

4 years

Wow 😮 Didn't even upgrade or anything – I guess VSCode did automatically – but just unreal to receive feedback like this right inline in my editor!

8

19

299

Sam Selikoff

@samselikoff

3 years

🧑‍💻 Ever wanted to inspect styles on tooltips that use JS (rather than CSS hover) to appear? Switch the inspector to the Sources tab, hover the element, then press F8. The JS engine pauses, and switching back to the Elements tab lets you inspect the element!

16

41

302

Sam Selikoff

@samselikoff

4 months

🚀 Announcing my newest video course — "Advanced Radix UI" Learn how to build custom UI components with Radix, Tailwind, and Framer Motion!

Advanced Radix UI

Build rich UI components — without doing any of the boring work.

buildui.com

9

25

302

Sam Selikoff

@samselikoff

2 years

🪄 I love using Framer Motion to pull off little details like this sticky header: – Shrinks, blurs and fades on scroll – Grows on scroll up, regardless of scroll position – Fully interruptible Check out this simplified reproduction on CodeSandbox:

8

19

300

Sam Selikoff

@samselikoff

1 year

✍️ About to send an exciting newsletter about my Framer Motion course... Sign up here if you don't want to miss it!

3

33

296

Sam Selikoff

@samselikoff

4 months

🔑 Tip from my <Slider> lesson: Add the `touch-none` and `select-none` Tailwind utilities to avoid unwanted scrolling + selection for custom components on mobile Safari!

3

25

291

Sam Selikoff

@samselikoff

5 years

🚀 Just launched a site for my new project, @miragejs ! Mirage is a framework-agnostic JS lib that gives UI developers the power of a real server, entirely within their frontend codebase. Read more about it at

11

69

286

Sam Selikoff

@samselikoff

4 years

Mirage now works out-of-the-box with Next.js! Mock out your client-side API requests with ease 👉

7

43

284

Sam Selikoff

@samselikoff

5 months

So happy browsers support border-radius on outline now. Makes designing focus states with Tailwind such a delight 😌 Just use `outline` utilities until it looks right (including rounding without disturbing existing layout), then grab 'em all and throw `focus:` in front!

6

13

283

Sam Selikoff

@samselikoff

10 months

Server Components were not created to let you send HTML to the browser. They were created to let you write React components that *only ever* execute on the server, enabling you to use server-only libraries like Prisma directly in the body of your component.

11

14

282

Sam Selikoff

@samselikoff

3 years

The fact that I'm so easily able to code these demos in Vue without ever having used it in earnest is a testament to how natural these APIs are from Headless UI. They feel exactly like what I would expect from an ideal browser implementation.

10

9

282

Sam Selikoff

@samselikoff

1 year

Threw together a page with some of my favorite Twitter vids from this year!

8

17

279

Sam Selikoff

@samselikoff

1 year

Haha this is dope – got my responsive chart working and decided to throw in container queries w/Tailwind for the X axis labels. Notice how the 2-up versions switch from "Mon" to "M" when they get too small. Same <Chart />, rendered three times!

9

14

274

Sam Selikoff

@samselikoff

6 months

Hello World for Optimstic UI with Remix's new useSubmit Hook. Blown away by how easy it is! And this only shows off the basics of what you can do with it.

8

23

263

Sam Selikoff

@samselikoff

1 year

Thrilled to share that we are bringing my 21 lesson, 2 hour 34 minute Tailwind CSS course to Build UI! 🥳 We build a pixel-perfect Discord clone where you'll learn layouts, typography + color customizations, how to work with components, and so much more along the way.

5

20

263

Sam Selikoff

@samselikoff

1 year

Looking for CMS recommendations: - Good TypeScript support - Queryable from Edge runtime Any suggestions?

80

13

260

Sam Selikoff

@samselikoff

19 days

I don’t think it’s correct to frame full-stack React frameworks like Remix and Next as encouraging devs to “Do as much of the work as possible on the server.” Most of the complexity of the apps I’ve worked on in the past five years has been on the frontend, and the goal of these

10

24

262

Sam Selikoff

@samselikoff

1 year

Why do new Next.js apps have CSS modules that I have to delete every time?! I've never used CSS modules and never plan to...

18

2

260

Sam Selikoff

@samselikoff

2 years

Does anyone know how to hide/remove horizontal scroll bars on scrollable elements? I'm working on a carousel similar to this one from and I noticed the scrolling is built with css scroll-snap (scrolling still works without JS). How'd they do it?

11

14

253

Sam Selikoff

@samselikoff

8 months

🧑‍🍳 New recipe: Highlight! Apply a temporary visual treatment whenever a React prop changes. It even works with RSC – the demos on this page highlight cookie values rendered from a Server Component!

5

12

254

Sam Selikoff

@samselikoff

4 months

I got a little excited at the end of this course — What can I say, React is just straight up fun to build with!!

4

11

251

Sam Selikoff

@samselikoff

4 months

Server-Side Rendering (SSR) makes understanding RSC tricky, because it's when Client Components get rendered on the server. Admittedly confusing! It's easier if you treat it as an optimization layer that comes after the core parts of the architecture:

9

27

247

Sam Selikoff

@samselikoff

1 year

Next.js 13 defaults all components to RSC, and some people have interpreted that to mean they should avoid client components as much as possible. That's not the point. SC and CC have uniquely distinct capabilities and should be used where appropriate without guilt.

11

18

248

Sam Selikoff

@samselikoff

9 months

Radix Themes looks incredibly dope – absolutely love this playground route: Going to be making some videos about this very soon!

Radix

@radix_ui

9 months

Get Radix Themes here:

3

5

141

4

19

246

Sam Selikoff

@samselikoff

3 months

🎥 New video: "Elastic Radix Slider" Watch me use Framer Motion to add a rubber band effect to a Slider built with Radix UI ✨ (0:00) – Before + After (0:39) – Moving the icon (5:31) – Animating on release (7:26) – Stretching the bar (12:24) – Animating the right icon (19:36) –

6

15

244

Sam Selikoff

@samselikoff

9 months

🎥 New YouTube video! Learn how CSS Variables can help bridge the gap between Tailwind CSS and Framer Motion:

4

28

242

Sam Selikoff

@samselikoff

1 year

framer motion's Pan gesture – detects mouse & pointer drags farther than 3px and reports back tons of info about them perfect for this slider!

4

16

239

Sam Selikoff

@samselikoff

1 year

We soft-launched Lifetime Memberships for Build UI last week and I've been blown away by all the support. Proves that this is what people wanted, and I'm thrilled to have found a better fit for our customers. If you've been holding off on joining Build UI and are hungry for

12

13

239

Sam Selikoff

@samselikoff

2 years

Last week I added Headless UI's <RadioGroup /> to this screen from my fitness app. Here's everything you'll get if you start using it in your own custom forms:

4

16

230

Sam Selikoff

@samselikoff

2 years

It's December 21, which means you have 10 days left to watch my entire flagship @tailwindcss course for free over on @eggheadio ! Join me as we build a Discord clone from scratch, step by step, including custom fonts, colors, and pixel-perfect layouts ✨

7

35

233

Sam Selikoff

@samselikoff

3 months

Just finished recording this beast, clocked in at almost two hours of raw record time 😵 It's gonna be epic! Comin' to YouTube 🔜

9

7

236

Sam Selikoff

@samselikoff

3 months

useOptimistic seems like a perfect fit for this demo: - When the app is settled, the URL's Search Params is the source of truth for the checkboxes - When the app is transitioning, the client becomes the source of truth

9

27

232