Tag

#design-system

36 posts5 followers

Explore Hashnode

Alternatives

Dave Kurian7h ago · 8 min read

Make a Fitness Food Log Faster When Search Returns Near-Matches

A meal log can have thousands of foods and still make dinner hard to record. The bottleneck may be the last few taps: find the right item, decide which serving matches the plate, correct the amount, a

otf-kit.hashnode.dev

Dave KurianOct 24 · 8 min read

What should you hand Cursor before asking for a premium SaaS dashboard?

If Cursor keeps returning cramped cards and weak hierarchy, give it a visual target and measurable layout rules before asking it to build. Treat the reference as a brief to interpret, not a screen to

otf-kit.hashnode.dev

Dave KurianOct 16 · 8 min read

Replace the generic AI landing page with evidence visitors can verify

Your AI page can look finished before it has proved anything. A polished gradient is not a product claim. A useful signal appeared in a 16 October discussion on r/SideProject: a builder described a de

otf-kit.hashnode.dev

Dave KurianOct 13 · 6 min read

How to keep profile avatars useful when user photos fail to load

A profile photo is decoration until it fails. Then the avatar is the only visual cue separating one person from another in a dense list, comment thread, or account menu. If the image disappears and th

otf-kit.hashnode.dev

Dave KurianOct 13 · 6 min read

shadcn's switch toggles one setting, so give each switch a label readers see

A settings toggle looks simple, and most of the work is in its label. shadcn's switch is a checked and unchecked control, and its page pairs it with a Field and a FieldLabel, so the label is part of w

otf-kit.hashnode.dev

Dave KurianOct 13 · 6 min read

shadcn's alert is a callout for attention, so match its variant to the risk

A callout that sits in the page is a different job from a message that fades away. shadcn's alert is a callout for user attention, and its page says nothing about when to use one, so the choice of var

otf-kit.hashnode.dev

Dave KurianOct 13 · 6 min read

shadcn's radio group allows one choice at a time, so pick the default on purpose

A plan picker needs exactly one answer, and a radio group enforces that for you. The parts you still own are the default the form starts with and the label each option carries. What the shadcn page co

otf-kit.hashnode.dev

Dave KurianOct 13 · 6 min read

shadcn's carousel runs on Embla, and autoplay is a plugin you add

A carousel that moves on its own is easy to build and hard to read. shadcn's carousel runs on Embla, and its autoplay is a plugin you add on purpose, so the decision to move the content is yours to ma

otf-kit.hashnode.dev

Dave KurianOct 13 · 6 min read

shadcn ships an ellipsis for long breadcrumbs, so plan the collapsed middle

A breadcrumb tells a user where they are, but a long one can push the page they want off a phone screen. shadcn's breadcrumb has a piece for that case, and its page documents it as a collapsed state.

otf-kit.hashnode.dev

Dave KurianOct 13 · 6 min read

shadcn's accordion shows one item at a time until you set multiple

A single-open accordion makes readers close one answer before they can read the next. The shadcn basic example works that way, and a multiple prop changes it. The choice is about how your readers move

otf-kit.hashnode.dev

Search Hashnode

Explore Hashnode

Trending tags this week

Make a Fitness Food Log Faster When Search Returns Near-Matches

What should you hand Cursor before asking for a premium SaaS dashboard?

Replace the generic AI landing page with evidence visitors can verify

How to keep profile avatars useful when user photos fail to load

shadcn's switch toggles one setting, so give each switch a label readers see

shadcn's alert is a callout for attention, so match its variant to the risk

shadcn's radio group allows one choice at a time, so pick the default on purpose

shadcn's carousel runs on Embla, and autoplay is a plugin you add

shadcn ships an ellipsis for long breadcrumbs, so plan the collapsed middle

shadcn's accordion shows one item at a time until you set multiple