UI Components

​

How UI Control Works

• Shows login forms when users need to authenticate
• Hides login buttons when users are already signed in
• Displays user dashboards only to authenticated users
• Shows welcome messages to new visitors
• Controls access to premium content based on user plans

​

What Gets Controlled Automatically

​

Authentication Elements

• Login Forms - Appear when users need to sign in
• Signup Forms - Show when new users need to register
• Logout Buttons - Display when users are signed in
• User Menus - Appear in navigation for authenticated users

​

Content Areas

• User Dashboards - Only visible to logged-in users
• Welcome Messages - Show to visitors who aren’t signed in
• Premium Content - Controlled by user subscription status
• Profile Sections - Display user-specific information

​

Navigation Elements

• Member-only Links - Show only to authenticated users
• Guest Navigation - Display for non-authenticated visitors
• User Avatar/Name - Show current user information
• Account Settings - Access to user preferences

​

Customization Options

​

Visual Styling

• Colors - Match your brand colors for authentication forms
• Typography - Choose fonts and text sizes
• Spacing - Adjust padding and margins
• Borders - Customize border styles and radius

​

Behavior Settings

• Animation Speed - Control how fast elements appear/disappear
• Loading States - Show spinners while checking authentication
• Transition Effects - Smooth fade-in/out animations
• Mobile Responsiveness - Automatic mobile optimization

​

Platform-Specific Features

​

Framer Integration

• Automatic Detection - Gately detects Framer components automatically
• Component Styling - Matches your Framer design system
• Responsive Design - Works perfectly on all screen sizes
• Animation Support - Smooth transitions between states

​

Webflow Integration

• Custom Attributes - Use Webflow’s custom attributes for control
• CMS Integration - Works with Webflow CMS content
• Interaction Support - Compatible with Webflow interactions
• Symbol Management - Control symbols based on auth state

​

Other Platforms

• Universal Compatibility - Works with any HTML-based platform
• CSS Framework Support - Compatible with Bootstrap, Tailwind, etc.
• Custom Integration - Flexible setup for any platform

​

Dashboard Configuration

​

Element Visibility Rules

• Authentication-based - Show/hide based on login status
• Plan-based - Control access by subscription tier
• Role-based - Different content for different user roles
• Time-based - Show content based on user registration date

​

Styling Options

• Theme Selection - Choose from pre-built themes
• Color Customization - Match your brand colors
• Font Settings - Typography that matches your site
• Layout Options - Spacing, borders, and positioning

​

Common Use Cases

​

Membership Sites

• Member Dashboard - Show personalized content to logged-in members
• Guest Welcome - Display signup prompts to visitors
• Tier-based Content - Different content for different membership levels
• Profile Management - User account settings and preferences

​

E-commerce Sites

• User Account - Order history and account management
• Guest Checkout - Streamlined experience for non-members
• Wishlist Features - Save items for logged-in users
• Personalized Recommendations - Based on user history

​

Content Sites

• Premium Articles - Paywall for exclusive content
• User Comments - Show comment forms to authenticated users
• Reading Progress - Track progress for logged-in users
• Bookmarks - Save articles for later reading

​

Best Practices

​

Troubleshooting

​

Testing Your Setup

1. Visit your published site (not the editor)
2. Test as a guest - Verify guest elements appear
3. Sign up for an account - Check member elements show
4. Log out and back in - Ensure state changes work
5. Test on mobile - Verify responsive behavior

​

Next Steps