Visual editor
Can I create reusable components in Draftbit?
Yes. A Draftbit project is a normal React Native, React, or Astro codebase, so a shared component is a file you or an agent write once and import wherever it is needed. Components exported from your project show up in the visual builder's Add Component panel, and theme tokens keep them consistent across screens.
Reviewed September 2, 2026
New Expo projects start with a component library. The scaffold uses React Native Reusables, a set of shadcn-style primitives, in a components/ui folder, with layout pieces in components/layout, and the agent instructions tell agents to reuse an existing component before creating a new one. Web projects follow the same pattern with shadcn/ui-style components in src/components/ui. You extend these libraries with your own components, either by asking an agent or by writing the file yourself in the Code Editor.
The visual builder treats your own components like Draftbit’s. The Add Component panel lists components exported from your project files next to Draftbit’s defaults, so you can select a parent on any screen and drop in a card, header, or form row you built earlier. In the component tree, each use of a shared component appears as a single item. Its internals live in its own file, so to change what is inside the component you open that file, use the Code tab, or ask the agent. Styling the instance where it is used still works from the Styles tab.
Consistency comes from the theme instead of copied values. The Themes page holds the shared colors and typography for light and dark mode, and components reference those tokens through utility classes for background, foreground, and the other named colors, so a palette change updates every component at once. For new sections, the Design Blocks gallery offers screens, sections, navigators, and components that the agent adapts to your theme.
Tell the agent which parts of a component should stay editable, such as its label text or image, and keep one-off screen sections local. A component only pays off when several places should change together. You can also record conventions like “always use the existing component library before creating new components” in your agent instructions so every future run follows them.
Useful links
Related questions
Start with your app idea
Create a free account and describe what you want to build.