Search
Search
Component Requirements
When you submit a component, you’re confirming it meets our standards. Built to guarantee quality, safety, and a great customer experience.
Expectations
What we offer creators, how the review process works, and what we ask in return.
Framer gives creators a lot: 100% of component earnings, 50% of referral revenue, and access to a fast-growing, highly visible platform. No listing fees. We actively promote great work.
Framer gives creators a lot: 100% of component earnings, 50% of referral revenue, and access to a fast-growing, highly visible platform. No listing fees. We actively promote great work.
Framer gives creators a lot: 100% of component earnings, 50% of referral revenue, and access to a fast-growing, highly visible platform. No listing fees. We actively promote great work.
To maintain quality, every component is reviewed manually. We often go back and forth with creators to refine things before publishing. The best work gets through.
To maintain quality, every component is reviewed manually. We often go back and forth with creators to refine things before publishing. The best work gets through.
To maintain quality, every component is reviewed manually. We often go back and forth with creators to refine things before publishing. The best work gets through.
If you’re rejected, read the feedback, revise, and resubmit. We’re here to help you build something successful — not just ship fast.
If you’re rejected, read the feedback, revise, and resubmit. We’re here to help you build something successful — not just ship fast.
If you’re rejected, read the feedback, revise, and resubmit. We’re here to help you build something successful — not just ship fast.
Originality
Build something new with a clear purpose.
Don’t reuse or lightly modify existing components.
Don’t reuse or lightly modify existing components.
Don’t reuse or lightly modify existing components.
Submit a single, focused component, not a bundle.
Submit a single, focused component, not a bundle.
Submit a single, focused component, not a bundle.
Create unique interactions and flows.
Create unique interactions and flows.
Create unique interactions and flows.
Button
+
Button
Button
Submit a single, focused component, not a bundle.
Structure
Organize clearly for quick editing.
Add property descriptions for any complex logic.
Add property descriptions for any complex logic.
Add property descriptions for any complex logic.
Define properties for anything a user might want to tweak.
Define properties for anything a user might want to tweak.
Define properties for anything a user might want to tweak.
Ensure users can easily update text, images, and icons.
Ensure users can easily update text, images, and icons.
Ensure users can easily update text, images, and icons.
Group property controls in a logical order.
Group property controls in a logical order.
Group property controls in a logical order.
API Key
Create a new key in your app dashboard.
Align
API Key
Align
Distribute
End
Include property descriptions if they are useful.
Content
Festina
Align
Direction
Distribute
End
Content
Festina
Align
Direction
Distribute
End
Add variables to anything user might want to tweak.
Design
Make it clean and consistent.
Use consistent colors, typography, and spacing throughout.
Use consistent colors, typography, and spacing throughout.
Use consistent colors, typography, and spacing throughout.
Avoid overstyling. Leave space for users to apply their brand.
Avoid overstyling. Leave space for users to apply their brand.
Avoid overstyling. Leave space for users to apply their brand.
Name components, layers, variants, and variables clearly.
Name components, layers, variants, and variables clearly.
Name components, layers, variants, and variables clearly.
Provide multiple states for interactive components.
Provide multiple states for interactive components.
Provide multiple states for interactive components.
Component
Links
Features
Contact
Buttons
Component
stack
text
text
stack
Name and organize elements clearly.
Responsiveness
Make it work on every screen.
Add breakpoint variants where necessary.
Add breakpoint variants where necessary.
Add breakpoint variants where necessary.
Use stacks to maintain flexible layouts.
Use stacks to maintain flexible layouts.
Use stacks to maintain flexible layouts.
Keep spacing and alignment consistent.
Keep spacing and alignment consistent.
Keep spacing and alignment consistent.
Prevent horizontal scrolling or layout issues.
Prevent horizontal scrolling or layout issues.
Prevent horizontal scrolling or layout issues.
Desktop
Component
Tablet
Mobile
Desktop
Component
Tablet
Mobile
Add breakpoints where needed.
Performance
Fast and smooth, everywhere.
Optimize for both desktop and mobile.
Optimize for both desktop and mobile.
Optimize for both desktop and mobile.
Avoid animations that cause layout shifts.
Avoid animations that cause layout shifts.
Avoid animations that cause layout shifts.
Remove unused assets, layers, and elements.
Remove unused assets, layers, and elements.
Remove unused assets, layers, and elements.
Ensure the component doesn’t interfere with page optimization.
Ensure the component doesn’t interfere with page optimization.
Ensure the component doesn’t interfere with page optimization.
Code
Custom code should be clean and easy to use.
Keep logic concise and readable.
Keep logic concise and readable.
Keep logic concise and readable.
Ensure code is efficient and free of errors.
Ensure code is efficient and free of errors.
Ensure code is efficient and free of errors.
Avoid deprecated APIs or insecure patterns.
Avoid deprecated APIs or insecure patterns.
Avoid deprecated APIs or insecure patterns.
Write code that is easy to maintain and understand.
Write code that is easy to maintain and understand.
Write code that is easy to maintain and understand.
Marketplace
Your listing should match the product.
Keep the live preview simple and focused on your component.
Keep the live preview simple and focused on your component.
Keep the live preview simple and focused on your component.
Limit preview to one visible component instance.
Limit preview to one visible component instance.
Limit preview to one visible component instance.
Don’t include branding, ads, or any other elements.
Don’t include branding, ads, or any other elements.
Don’t include branding, ads, or any other elements.
Clearly describe what the component does.
Clearly describe what the component does.
Clearly describe what the component does.
Highlight the component’s unique features.
Highlight the component’s unique features.
Highlight the component’s unique features.
Use inline images or videos that reflect the product.
Use inline images or videos that reflect the product.
Use inline images or videos that reflect the product.
Copy
Preview
Don’t include branding, ads, or any additional elements.
Thumbnail
Keep visuals relevant and clean.
Keep things minimal; avoid additional elements.
Keep things minimal; avoid additional elements.
Keep things minimal; avoid additional elements.
Show a single component instance.
Show a single component instance.
Show a single component instance.
Avoid adding additional text or labels.
Avoid adding additional text or labels.
Avoid adding additional text or labels.
Make it visually engaging.
Make it visually engaging.
Make it visually engaging.
Use sharp, high-quality assets.
Use sharp, high-quality assets.
Use sharp, high-quality assets.
Find inspiration in top components.
Find inspiration in top components.
Find inspiration in top components.
Button
Button component
Button
3 customizable variants
Keep things minimal—avoid additional elements.
Support
Set clear expectations with buyers.
Respond promptly to questions or issues.
Respond promptly to questions or issues.
Respond promptly to questions or issues.
Add a clear refund policy to your checkout page.
Add a clear refund policy to your checkout page.
Add a clear refund policy to your checkout page.
Keep your component updated as Framer evolves.
Keep your component updated as Framer evolves.
Keep your component updated as Framer evolves.
Submit
Double check these before heading to the Creators Dashboard to start the process.
Ensure it meets all the requirements.
Ensure it meets all the requirements.
Ensure it meets all the requirements.
Test all properties, interactions, and states.
Test all properties, interactions, and states.
Test all properties, interactions, and states.
Make sure your listing is clear and accurate.
Make sure your listing is clear and accurate.
Make sure your listing is clear and accurate.
Confirm the component is responsive and polished.
Confirm the component is responsive and polished.
Confirm the component is responsive and polished.
FAQ
What gets a component rejected?
Components are usually rejected for missing core requirements or lack of originality. Always review the above list closely before submitting.
What gets a component rejected?
Components are usually rejected for missing core requirements or lack of originality. Always review the above list closely before submitting.
What gets a component rejected?
Components are usually rejected for missing core requirements or lack of originality. Always review the above list closely before submitting.
What should I do after a rejection?
Read the feedback, revisit the requirements, and review published components for inspiration. Framer Academy is a great resource to help you improve and resubmit.
What should I do after a rejection?
Read the feedback, revisit the requirements, and review published components for inspiration. Framer Academy is a great resource to help you improve and resubmit.
What should I do after a rejection?
Read the feedback, revisit the requirements, and review published components for inspiration. Framer Academy is a great resource to help you improve and resubmit.
Will I be notified if my component is rejected?
Yes. We’ll let you know if your submission doesn’t meet the bar. While we aim to offer feedback, we can’t guarantee notes on every rejection — especially when many fundamentals are missing.
Will I be notified if my component is rejected?
Yes. We’ll let you know if your submission doesn’t meet the bar. While we aim to offer feedback, we can’t guarantee notes on every rejection — especially when many fundamentals are missing.
Will I be notified if my component is rejected?
Yes. We’ll let you know if your submission doesn’t meet the bar. While we aim to offer feedback, we can’t guarantee notes on every rejection — especially when many fundamentals are missing.
How do I include a refund policy with my component?
Add refund info on your checkout page (e.g. Lemon Squeezy, Stripe, Polar, or Gumroad) so buyers know what to expect.
How do I include a refund policy with my component?
Add refund info on your checkout page (e.g. Lemon Squeezy, Stripe, Polar, or Gumroad) so buyers know what to expect.
How do I include a refund policy with my component?
Add refund info on your checkout page (e.g. Lemon Squeezy, Stripe, Polar, or Gumroad) so buyers know what to expect.