AI coding guides & resources
Engineering decisions, tutorials, and video guides from the OTF team.
shadcn's switch toggles one setting, so give each switch a label readers see
shadcn's switch is a settings toggle, and its label does most of the work. Labels, save rules and tests.
6 min read
shadcn's alert is a callout for attention, so match its variant to the risk
shadcn's alert is a callout for user attention. Markup, the variant rule and on-screen tests in React.
6 min read
shadcn's radio group allows one choice, so pick the default on purpose
shadcn's radio group lets one option win. Here is the plan picker, the default to pick, and the keyboard tests.
6 min read
shadcn's carousel runs on Embla, and autoplay is a plugin you add
shadcn's carousel runs on Embla, and autoplay is a plugin you add. Setup, a pause control and tests.
6 min read
shadcn ships an ellipsis for long breadcrumbs, so plan the collapsed middle
shadcn's breadcrumb shows a page's place in a deep app and collapses long paths. Setup, ellipsis and tests in React.
6 min read
shadcn's accordion shows one item at a time until you set multiple
shadcn's accordion opens one answer at a time. Here is a single-open FAQ, the multiple prop, and the keyboard tests.
6 min read
A verification code is six slots in shadcn, so plan paste and submit
shadcn's OTP input is six slots with paste built in. Here is the code field, the verify step and the sign-in checks for an email code.
6 min read
shadcn's select shows invalid state on the trigger, so wire validation there
shadcn's select shows its invalid state on the trigger. Here is the field wiring, a submit check, and the keyboard and phone tests in React.
6 min read
shadcn's toast page wants toast.add with a title, not one call
shadcn's toast page uses toast.add with a title, not one call. Here is the Toaster setup, a submit example and an undo action in React.
6 min read
A sheet is a dialog pinned to an edge, so choose by the task
Sheet extends Dialog in shadcn. Choose a dialog for a decision and a sheet for a side task, with code for each in React.
6 min read
shadcn's combobox is built on Base UI, not Popover and Command
shadcn's combobox is built on Base UI, not Popover and Command. Here is how to wire a searchable list of long options in React.
6 min read
shadcn's date picker lists presets, but its visible code has none
The shadcn date picker lists presets but shows none in code. Build a date range picker with presets, plus the variant to use for each form.
7 min read
shadcn ships no data table component, so build sorting and paging yourself
shadcn ships a guide, not a data table. Add sorting, filtering and pagination with TanStack Table, with code for each step.
7 min read
React templates: choose between a landing page and a full app starter
React templates range from landing pages to full app starters. Choose one that fits your product.
7 min read
Build shadcn checkbox groups in React with reliable select-all behavior
Build a React checkbox group with select-all behavior, partial-selection feedback, labeled controls, and form-ready values.
7 min read
Shadcn tabs in React: design clear views without losing context
Build shadcn tabs in React with clear labels, keyboard access, and Radix-based behavior.
7 min read
Shadcn charts in React: pick a view that fits each data set.
Choose shadcn charts by the decision they support, then make the data clear, responsive, accessible, and testable.
8 min read
A shadcn sidebar for React apps: clear navigation on desktop and mobile
Build a shadcn sidebar that scales with your React app: plan route groups, mark the active page, and make collapse and mobile navigation usable.
8 min read
Shadcn icons in React apps: choose one set and ship a consistent interface
A practical way to choose shadcn icons for React: verify imports, visual fit, labels, and app ownership.
7 min read
Next Stepper for React: Multi-Step Forms with Clear Progress
Next stepper patterns help React teams show form progress while application code owns validation, navigation, and submission.
8 min read
Google Play Families policy for child-targeted apps
Google Play Families policy checks for target audiences, SDKs, data, ads, and child-facing app flows.
7 min read
Android 14 foreground services: declare the type and permission
For Android 14 targets, map each foreground service to its type, permission, and runtime prerequisites before release.
6 min read
Android notification permission: request POST_NOTIFICATIONS in context
Android 13+ guide to timing POST_NOTIFICATIONS, handling each choice, and testing install and upgrade behavior.
7 min read
Google Play ads declaration: check formats before submission
Before submission, check ad formats, SDKs and cross-promotion to answer the Play Console ads declaration accurately.
7 min read
