Sheets Visualizer: Premium UI Component by Nabeel

About

This powerful component suite connects your Framer projects directly to Google Sheets, allowing you to display sheet data as formatted text, interactive tables, line charts, or bar charts without any backend coding or API subscriptions. The data updates in real-time when your Google Sheet changes, making it perfect for dynamic content displays. Ideal for creating dashboards, data visualizations, personal trackers, and analytics displays in Framer without complex backend integration.

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library

Instructions

Remix the sample file
Make your Google Sheet public by going to File → Share → Publish to web in Google Sheets.
Copy the URL of your published Google Sheet.
Paste the URL into the "Sheet URL" field in the component properties.
Configure which columns to display using column letters (e.g., A, B, C).
Customize the appearance using the provided property controls (colors, borders, spacing, etc.).
For charts, specify which columns contain labels (X-axis) and values (Y-axis).
The component will automatically fetch and display your data in the selected format.
Ensure that the numbers are not formatted (No commas, prefixes or suffixes) in the column data

Remember that your Google Sheet must be published to the web and publicly accessible for the component to work correctly.

For the current example, we used this sheet

How It Works

The implementation includes four components: single cell display, full table view, line chart, and bar chart. Each requires a shared/public Google Sheet URL and simple configuration of which data to display. You can customize colors, fonts, borders, tooltips, and other visual elements to match your design system.