Getting Started with Components
You can copy components from Flowbase without needing to create an account for up to five free components. Once you hit that limit, you'll need to create an account - you can start with a free account, or sign up to our Pro+ program here.
All you will need is a supported browser like Chrome, or Firefox (Please note that Safari is not supported due to its clipboard limitations). Components can be added into your favorite platforms like Webflow, Figma & Framer by a simple paste into the canvas.

Browse the Library
Browse through the library and find a component suitable for your project. We're always adding new components, so check back regularly for new content. On average we try to add about 10-20 new components each month.

Copy the component
Once you've found the component you'd like to use, you can click 'Copy Component' button on the right side of the page. This will add the component to your clipboard so it's ready to paste directly into your project.

Paste into your Platform
Components can be copied into your favorite platform, simply press (CTRL + V). Components are designed to work right out of the box and are easily customizable so you can seamlessly integrate it in to your own project. For Webflow, we recommend targeting the <body> layer and pasting once it has been selected.
Install Class Merging Extension
When pasting a component into Webflow, any incoming classes with matching names but different styles will be automatically duplicated. This often results in a cluttered class list, with names like "Section Large 5"
or "Paragraph Regular 16"
, making it tedious to update everything manually.
To prevent this, we recommend installing the free X-Atom Class Merging Chrome extension. X-Atom automatically merges matching incoming classes with the existing ones in your project, keeping your class structure clean and organized.