---
title: "Social Widget — Free Framer component · Best of Framer"
description: "Free Framer component · by Vadym Kolisnichenko · Buttons. Premium Neumorphic Social Widget Add a touch of modern elegance to your site with this interactive \"Soft UI\" social media hub."
canonical: "https://framer.elliotli.dev/component/social-widget"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Social Widget

# Social Widget

Clean Neumorphism Social Kit

[View on Framer](https://framer.com/marketplace/components/social-widget/?via=elliot-li)

![Social Widget preview image 1](https://framer.elliotli.dev/og/component/social-widget/f1712d5bc8203375/1600x1200.jpg)

## Summary

Premium Neumorphic Social Widget Add a touch of modern elegance to your site with this interactive "Soft UI" social media hub.

## Description

## Premium Neumorphic Social Widget

Add a touch of modern elegance to your site with this interactive "Soft UI" social media hub. Designed to be tactile and engaging, this widget expands on hover to reveal your social links.

Perfect for portfolios, contact pages, and modern landing pages.

### Key Features:

-   **4 Color Themes:** Comes with pre-set styles for Light, Dark, Yellow, and Pink backgrounds.
    
-   **Smart Layouts:** Switch between **Horizontal** and **Vertical** expansion with a single click.
    
-   **6 Supported Platforms:** Includes toggleable icons for WhatsApp, Instagram, Telegram, YouTube, LinkedIn, and X (Twitter).
    
-   **Fully Interactive:** Smooth hover animations and "pressed" states included.
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-7h2f15qk-Pv9xbDWm2dgY72uWjNmP409KWjVlYR)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-7h2f15qk-uPnXYTAsQvIzkB3W69NbX240pcvHlS)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-7h2f15qk-4pDlhlF7nMqUUPfQ8WARmtJT7gWvV4)

### How to use:

1.  **Drag the component** to your canvas.
    
2.  **Match the Background:** Ensure your page background matches the component color (Hex codes included in component when you open it and click needed variant) for the Neumorphism effect to work.
    
3.  **Toggle Apps:** Turn on/off the social networks you need using the boolean toggles.
    
4.  **Add Links:** Paste your profile URLs into the corresponding fields.
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-7h2f15qk-Ke0yCWUYeNZYNyo4pLXgAePFNbrR7C)

**Elevate your footer or contact section with this stylish no-code component!**

## Rank history [How rankings work →](/terms#rankings)

-   All · #1380

## Details

- **Author**: Vadym Kolisnichenko
- **Published**: 2026-02-18
- **Updated**: 2026-09-21
- **Added**: 2026-02-10
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything