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.
Include inline comments for complex logic.
Include inline comments for complex logic.
Include inline comments for complex logic.
Add variables to anything user might want to tweak.
Add variables to anything user might want to tweak.
Add variables to anything user might want to tweak.
Make sure users can easily swap text, images, and icons.
Make sure users can easily swap text, images, and icons.
Make sure users can easily swap text, images, and icons.
Group variables logically.
Group variables logically.
Group variables logically.
Label everything clearly.
Label everything clearly.
Label everything clearly.
Content
Start for free
Field to edit button text
Align
Content
Start for free
Align
Distribute
End
Include inline comments for complex logic.
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.
Keep consistent colors, type, and spacing system.
Keep consistent colors, type, and spacing system.
Keep consistent colors, type, and spacing system.
Don’t overstyle. Leave room for users to apply their brand.
Don’t overstyle. Leave room for users to apply their brand.
Don’t overstyle. Leave room for users to apply their brand.
Name the component, layers, variants, and variables clearly.
Name the component, layers, variants, and variables clearly.
Name the component, layers, variants, and variables clearly.
Include multiple states if component is interactive.
Include multiple states if component is interactive.
Include multiple states if component is interactive.
Component
Links
Features
Contact
Buttons
Component
stack
text
text
stack
Name and organize elements clearly.
Responsiveness
Make it work on every screen.
Add breakpoints where needed.
Add breakpoints where needed.
Add breakpoints where needed.
Use stacks to keep layouts flexible.
Use stacks to keep layouts flexible.
Use stacks to keep layouts flexible.
Keep spacing and alignment consistent.
Keep spacing and alignment consistent.
Keep spacing and alignment consistent.
Avoid horizontal scroll or layout issues.
Avoid horizontal scroll or layout issues.
Avoid horizontal scroll or layout issues.
Desktop
Component
Tablet
Mobile
Desktop
Component
Tablet
Mobile
Add breakpoints where needed.
Performance
Fast and smooth, everywhere.
Optimize for desktop and mobile.
Optimize for desktop and mobile.
Optimize for desktop and mobile.
Avoid animations that cause layout shift.
Avoid animations that cause layout shift.
Avoid animations that cause layout shift.
Clean up unused assets, layers, and elements.
Clean up unused assets, layers, and elements.
Clean up unused assets, layers, and elements.
Make sure component doesn't break page optimization
Make sure component doesn't break page optimization
Make sure component doesn't break page optimization
Overrides
Custom code should be clean and easy to use.
Keep logic short and readable.
Keep logic short and readable.
Keep logic short and readable.
Keep code efficient and error-free.
Keep code efficient and error-free.
Keep code efficient and error-free.
Avoid deprecated APIs or insecure code patterns.
Avoid deprecated APIs or insecure code patterns.
Avoid deprecated APIs or insecure code patterns.
Make code easy to read and maintain for others.
Make code easy to read and maintain for others.
Make code easy to read and maintain for others.
Marketplace
Your listing should match the product.
Use preview images that reflect the product.
Use preview images that reflect the product.
Use preview images that reflect the product.
Tag your component in the right categories.
Tag your component in the right categories.
Tag your component in the right categories.
Describe exactly what the component does.
Describe exactly what the component does.
Describe exactly what the component does.
Highlight your component unique features.
Highlight your component unique features.
Highlight your component unique features.
Support
Set clear expectations with buyers.
Respond quickly to questions or issues.
Respond quickly to questions or issues.
Respond quickly to questions or issues.
Add a refund policy to your checkout page.
Add a refund policy to your checkout page.
Add a 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.