Guidelines for UI elements
We review each submission to maintain the high standards and wide selection of unique designs.
Uniqueness is Key
The most common reason for rejection is lack of uniqueness. Remember, unique doesn't mean complicated. A simple design with perfect execution or a fresh take on common patterns can be just as valuable. We're looking for submissions that stand out through thoughtful design, high-quality implementation, or innovative approaches.
Do's
Add hover, focus, and active states to your elements - this increases your chance of approval
Use em units for size measurements in buttons, checkboxes, and inputs - this makes your elements scale better with font size
You can include SVG in both CSS and HTML, just keep them small and simple
Using CSS variables is good practice, but define them in your component's scope, not globally
Make your elements accessible - for example, use colors with good contrast
Create elements that are unique and interesting - simple color changes are not enough
Use either English or Lorem ipsum for any text content
Follow basic design rules: proper spacing, logical grouping, and matching colors
Keep shadows light and subtle in most cases
Don'ts
JavaScript is not allowed. You will be banned for any XSS attempts
We do not accept posts that are duplicates or too similar to existing posts on Frontend Forever
Do not use tags that are not related to your post
Do not style global elements like <body> or <html>
Keep your post focused - one element per post only
Keep your styles specific - use class names instead of global styles
Do not include any external resources - this includes images, fonts, and other external files
When using SVG, it should support your design, not be the main focus of the element
Do not include CSS browser prefixes in your code
Keep your elements sized appropriately - they should match the typical size of other elements in the same category
Examples of rejected UI elements
See the following UI examples of how not to do things
This is not a subtle shadow and the button is too big
This is not a subtle shadow and the button is too big
Bad spacing, alignment and contrast
Bad spacing, alignment and contrast
External images are not allowed
External images are not allowed
Not enough contrast
Not enough contrast
This SVG is too big and takes up about 270 lines in the HTML
This SVG is too big and takes up about 270 lines in the HTML, this should be avoided
Not enough added value
Not enough added value
Examples of approved UI elements
See the following UI examples of what gets posts approved
Good use of colors, shadows and hierarchy
Good use of colors, shadows and hierarchy
Good size, similar to all other buttons on Frontend Forever
Good size, similar to all other buttons on Frontend Forever and in the real world
Good SVG usage
Good SVG usage
Unique design
Unique design
Good hierarchy, use of colors and SVG
Good hierarchy, use of colors and SVG
Good SVG usage and custom color background
Good SVG usage and custom color background
Ready to Submit Your Element?
Follow these guidelines to increase your chances of getting your UI element approved and featured on Frontend Forever.