Guide: Moving a design into a React app

A Knighn design is already React with Tailwind. The work is to copy it, then add data and logic.

A Knighn design is already React with Tailwind. The work is to copy it, then add data and logic.

  1. Get the code of a screen and the components that it uses. In the app, use the Code panel. With execute:

    return await Export('Landing', 'tsx')
    
  2. Copy the tokens. Put the @theme block and the mode blocks in the CSS of the app, after @import 'tailwindcss';. Keep the @custom-variant dark line when the app uses data-theme for dark mode.

  3. Choose how the layout responds. A page that fills the window can use viewport variants: change @3xl: to md: with the table in tailwind.md. Or keep the container variants and put @container on the root of the page.

  4. Change the design sizes to app sizes. A root with size-full in a frame can be min-h-dvh in an app page, because viewport units are correct in an app.

  5. Keep the className prop. In the app, join classes with cn() from clsx and tailwind-merge, so that the classes of an instance can replace the classes of the component.

  6. Keep the variant maps, or change them to cva if the app uses it.

  7. Add the logic that the subset does not have: data from props or an API, .map() over arrays in place of the instances that the design writes out, event handlers and state. Keep the design components for display only.

  8. Images at https://share.knighn.com/a/… work as they are. For production, copy the files into the app.

  9. Load the fonts with a Google Fonts link, or with the font loader of the framework.

Check the result against a screenshot of the frame at the same width.