Quickstart

This guide will help you quickly integrate pre-built components from Componefy into your project. We’ll show you how to browse, copy, and customize components, whether you're working with React, Vue, Svelte, or TailwindCSS.

Choose your framework

Componefy provides components that are pre-built and ready to use with popular frameworks like React, Vue, Svelte, and TailwindCSS. To start, select the framework you are using, copy the provided code, and add it to your project.

// Copy the code for the component from Componefy
// and use it directly in your React project.

import { Button } from '@/components/button'

function App() {
  return <Button text="Click me!" />
}

Customizing your component

Once you have the code in your project, you can easily customize it to fit your design needs. Componefy components are fully customizable with your framework of choice. Change the styles, text, or layout to make the component match your project.

For example, here’s how you can change the text or style of a button in React:

import { Button } from 'path-to-Button-component'

function App() {
  return <Button text="Submit" style={{ backgroundColor: 'green' }} />
}

What's next?

Great, Now that you've added your first component, here are a few resources to help you explore Componefy further and make the most out of our ready-to-use library:

• Browse our full library of components
• Learn how to customize components
• Check out TailwindCSS Blocks