Quick Start Guide

Get Flemo up and running in your React application in just a few minutes. This guide covers installation, basic setup, and your first route.

Installation
Add Flemo to your project
Terminal
npm install flemo motion
Basic Setup
Configure your router in 3 simple steps
1

Import the Router

import { Router, Route } from "flemo";
2

Wrap Your App

function App() {
return (
<Router>
{/* Your routes go here */}
</Router>
);
}
3

Define Your Routes

<Router>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/product/:id" element={<ProductDetail />} />
</Router>
Complete Example
A full working example with smooth transitions
import { Router, Route } from "flemo";
 
// Your page components
const Home = () => <div>Welcome to Home!</div>;
const About = () => <div>About Us</div>;
const Contact = () => <div>Contact Us</div>;
const ProductDetail = ({ params }) => (
<div>Product Detail: {params.id}</div>
);
 
function App() {
return (
<Router>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/product/:id" element={<ProductDetail />} />
</Router>
);
}
 
export default App;
You're Ready!
Your router is now set up and ready to use

Congratulations! You now have a working Flemo setup with smooth transitions.

Explore API Reference
Next Steps
Continue learning with advanced features
  • Custom transition animations
  • Route parameters and guards
  • Nested routing patterns
View Examples