Migrating an Existing Interface
Replace one complete workflow at a time, keeping application data and behavior under your control.
Choose a first slice
A small client/project tracker is a practical first consumer: list active projects, filter by name or status, create or edit a record, confirm archiving, and show save success or failure. Use native HTML forms and controls; let your application own filtering, record state, and persistence. Start with in-memory sample data for a prototype. Shared client records need an authorized server API.
Map intent to existing patterns
These are useful examples, not an exhaustive class conversion. Check the component examples before replacing a whole screen.
| Existing pattern | Focus UI starting point |
|---|---|
Bootstrap .container .row .col-md-6 | focus-container, focus-row, focus-col-md-6 |
Bootstrap .btn.btn-primary | focus-btn focus-btn-primary |
| Bootstrap card sections | focus-card with header, body, and optional footer classes |
Bootstrap .form-control | Native input with focus-input and an associated label |
Bootstrap .table | focus-table; sorting requires the version-appropriate table API |
Tailwind flex gap-4 p-4 | focus-d-flex focus-gap-4 focus-p-4 |
| Tailwind button or card styles | focus-btn plus a semantic variant; or focus-card and its documented sections |
Do not mechanically prefix classes or translate every utility. Focus UI has its own layout and token system; keep small application styles where no equivalent exists. Reset and base selectors affect global elements, so check for conflicts while both libraries are loaded.
Move behavior with the markup
Keep filtering and create/edit state in the application. Disable Save while a request is pending, report success only after it succeeds, and show a useful error when it fails. Handle non-2xx fetch responses explicitly. Catch cancellation from Modal.confirm() before sending an archive request; server authorization and validation remain required.
Use visible labels, native buttons, visible focus, and a sensible heading order. Check the tracker with a keyboard and at phone width; decide whether its table scrolls or becomes a compact list. A browser-only prototype may keep records in memory or in localStorage, but localStorage is single-browser storage, not shared or access-controlled persistence.
Verify the slice before expanding
Try empty and filtered results, invalid input, pending/success/error feedback, archive cancel/confirm, keyboard navigation, narrow layouts, and light/dark themes. Remove old handlers for migrated controls so actions are not bound twice. Framework applications should keep state in the framework and initialize/destroy Focus UI behavior with component lifecycles. This repository is private for npm publishing; CDN v2.0.0 predates current development-source lifecycle APIs. See the user migration guide and API version notes.