Dribbble Profile Component

Displays your Dribbble profile

Written By Social Hampster

Last updated About 11 hours ago

Displays your Dribbble profile information: your avatar, display name, follower count, shot count, and bio. Designed to be placed alongside your Dribbble Grid or Slider to give your portfolio a professional, branded look.

Plan: Personal and above

How to Insert

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

From the dashboard: Click Details on your Dribbble feed, click Copy next to Profile, 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
Show Avatar	Shows your Dribbble profile picture	Toggle
Show Name	Shows your display name	Toggle
Show Follower Count	Shows your Dribbble follower count	Toggle
Show Shot Count	Shows the total number of shots on your account	Toggle
Show Bio	Shows your Dribbble bio text	Toggle
Layout	Horizontal or vertical arrangement	Horizontal: avatar on the left. Vertical: avatar on top.
Avatar Size	Size of the profile picture in pixels
Avatar Border Radius	Rounds the avatar shape	Set to 50% for a circle
Text Color	Color of the name and stats text
Background Color	Component background color

Use Case Idea

Place the Profile component at the top of your portfolio section to display your Dribbble identity, then follow it with a Grid or Slider of your shots. This creates a complete, auto-updating portfolio section on any page of your Framer site.

The component updates automatically when you gain followers or publish new work, so you never need to edit it manually.

Tip: This component works especially well for personal portfolio sites and agency sites. Pair it with the Dribbble Grid for a clean, always-current showcase of your design work.