Dribbble Grid

Displays your Dribbble shots in an even column grid

Written By Social Hampster

Last updated About 11 hours ago

Displays your Dribbble shots in an even column grid. Perfect for designers who want to showcase their portfolio directly on their Framer site without maintaining a separate portfolio page. Available on the Free plan.

Plan: Free and above

How to Insert

From the plugin: After connecting your Dribbble account, click Grid in the plugin panel.

From the dashboard: Click Details on your Dribbble feed, click Copy next to Grid, then paste in Framer with Cmd+V or Ctrl+V.

Props Reference

Prop	What it does	Notes
Feed ID	Links the component to your Dribbble account	Set automatically
Max Shots	How many shots to show
Columns	Number of columns in the grid
Gap	Space between cards in pixels
Show Title	Shows the shot title below the card	Toggle
Show Views	Shows the view count on the card	Toggle
Show Likes	Shows the like count on the card	Toggle
Aspect Ratio	Shape of each card	Dribbble shots are usually 4:3 or 16:9
Border Radius	Rounds card corners
Image Fit	How images fill the card	Cover or Contain
Overlay Color	Color overlay shown on hover
Overlay Opacity	Opacity of the hover overlay	Value from 0 to 1

Common Issues

Shots are cropped in an unexpected way

Try switching the Aspect Ratio to match your shots. Dribbble shots are typically in a 4:3 ratio. You can also set Image Fit to Contain to show the full image without cropping.

Feed not showing on the published site

Whitelist your domain in the Social Hampster dashboard under your feed's Details page.