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.
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')Copy the tokens. Put the
@themeblock and the mode blocks in the CSS of the app, after@import 'tailwindcss';. Keep the@custom-variant darkline when the app usesdata-themefor dark mode.Choose how the layout responds. A page that fills the window can use viewport variants: change
@3xl:tomd:with the table in tailwind.md. Or keep the container variants and put@containeron the root of the page.Change the design sizes to app sizes. A root with
size-fullin a frame can bemin-h-dvhin an app page, because viewport units are correct in an app.Keep the
classNameprop. In the app, join classes withcn()fromclsxandtailwind-merge, so that the classes of an instance can replace the classes of the component.Keep the variant maps, or change them to
cvaif the app uses it.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.Images at
https://share.knighn.com/a/…work as they are. For production, copy the files into the app.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.