Page Favouriting
A working, realtime page favoriting component that you can add to any page to allow user to favourite it.
Make it with Workshop
Build your own component with AI
About
A customizable favorite/like button that shows total favorites and remembers if the current user has favorited the page. When clicked, it updates both the visual state and total count, saves the user's preference in their browser. No need for additional APIs/subscriptions/set up. Just drag and drop and see it in effect.
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
Copy and paste the FavoriteButton component into your project file
Customize the appearance through the properties panel
Publish and preview URL
The button will automatically:
Show total favorites from all users
Remember if the current user has favorited (using local storage)
Update counts instantly when clicked
To test it out, open the URL in a different device or in incognito.
How It Works
The component is pre-connected to a public Supabase database that stores total favorites per page. It uses local storage to remember each user's favorites across sessions. You can customize:
Icon Type: Choose between heart, star, or bookmark
Icon Size
Spacing
Active/Inactive Colors
Font: Complete typography control
Note: The component uses a shared public Supabase instance with rate limiting and row-level security in place. While this isn't the most secure approach, it enables drag-and-drop functionality since we're only tracking basic interactions.
Support
For any queries and help setting up the component, contact hello@segmentui.com
