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 is a fast-growing, highly visible platform — a great place to showcase your component to the community. There are no listing fees, and we actively promote great work.
Framer is a fast-growing, highly visible platform — a great place to showcase your component to the community. There are no listing fees, and we actively promote great work.
Framer is a fast-growing, highly visible platform — a great place to showcase your component to the community. There are no listing fees, and we actively promote great work.
To maintain quality, every submission 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 submission 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 submission 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 inline descriptions for any complex logic.
Add inline descriptions for any complex logic.
Add inline descriptions for any complex logic.
Define variables for anything a user might want to tweak.
Define variables for anything a user might want to tweak.
Define variables 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 variables in a logical order.
Group variables in a logical order.
Group variables in a logical order.
Clearly label elements that need extra context.
Clearly label elements that need extra context.
Clearly label elements that need extra context.
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's easy to maintain and understand.
Write code that's easy to maintain and understand.
Write code that's easy to maintain and understand.
Marketplace
Your listing should match the product.
Add a preview page to showcase your component.
Add a preview page to showcase your component.
Add a preview page to showcase your component.
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.
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.
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.