Installation
Home/Installation

Installation

webeeui-doc-three-col

Get started quickly with WebeeUI

Welcome to WebeeUI — a component and template library made for Notion site builders like Super and Bullet.so.
You can get started in just a few minutes:
  1. Visit the WebeeUI components library.
  1. Choose a component or template.
  1. Copy the Notion block and paste it into your Notion page.
  1. Paste the provided CSS into the "Custom Code" section in Super or Bullet.so.
  1. Publish and you're done!
notion image
Want to build a beautiful, responsive Notion-based website without spending hours designing every section from scratch? You’re in the right place.
WebeeUI helps you create stunning websites using Super, Bullet.so, or any other Notion site builder – with professionally crafted, responsive components that you can plug in instantly.
// Initialize each dropdown independently
const allDropdowns = document.querySelectorAll('.notion-sync-block .notion-collection-group');
allDropdowns.forEach(function(details) {
    const summary = details.querySelector('.notion-collection-group-title');
    const content = details.querySelector('.notion-list-collection');
    const contentInner = details.querySelector('.notion-list-view');
    
    // Skip if essential elements are missing
    if (!summary || !content || !contentInner) return;
    
    // Prevent default details behavior
    summary.addEventListener('click', function(e) {
        e.preventDefault();
        
        if (details.hasAttribute('open')) {
            // Close animation
            details.classList.remove('animating');
            content.style.height = content.scrollHeight + 'px';
            
            requestAnimationFrame(() => {
                content.style.height = '0px';
                contentInner.style.opacity = '0';
                // contentInner.style.transform = 'translateY(-20px)';
                
                // Reset link animations for this specific dropdown
                const links = content.querySelectorAll('.notion-list-item');
                links.forEach(link => {
                    link.style.animation = 'none';
                    link.style.opacity = '1';
                    // link.style.transform = 'translateX(0px)';
                });
            });
            
            setTimeout(() => {
                details.removeAttribute('open');
            }, 300);
            
        } else {

            details.setAttribute('open', '');
            details.classList.add('animating');
            
            // Get the natural height
            content.style.height = 'auto';
            const height = content.scrollHeight;
            content.style.height = '0px';
            
            requestAnimationFrame(() => {
                content.style.height = height + 'px';
                
                setTimeout(() => {
                    contentInner.style.opacity = '1';
                    // contentInner.style.transform = 'translateY(0)';
                }, 100);
            });
            
            setTimeout(() => {
                content.style.height = 'auto';
                details.classList.remove('animating');
            }, 300);
        }
    });
});

🚀 What You Can Build

With WebeeUI, your Notion site can become:
  • A startup landing page
  • A freelancer or creator portfolio
  • A personal blog or bio site
  • A project or side hustle site
You can mix and match components as needed. Want a pricing section with gradient buttons and hover effects? Just copy, paste, and go.

🌟 WebeeUI

WebeeUI is a powerful design library created specifically for users who build websites using Notion as the backend and site builders like Super or Bullet.so. It offers a curated collection of professional-grade components and templates that can be copied and reused directly within your Notion pages — with minimal setup and no design skills required.

✅ Why Use WebeeUI?

Creating a website from scratch using Notion is flexible, but it can take a lot of time to design everything yourself. WebeeUI eliminates that problem by giving you ready-to-use components that are:
  • Visually polished and consistent
  • Fully responsive across devices
  • Easy to customize
  • Compatible with Super, Bullet.so, and other Notion-based builders
Whether you’re building a startup landing page, personal blog, creator portfolio, or a project website, WebeeUI helps you launch faster with less effort.

🔧 How to Set Up WebeeUI (Step-by-Step)

  1. Browse the WebeeUI Library
      • Visit the official WebeeUI site and explore the collection of components and templates.
      • Components include sections like hero banners, pricing tables, testimonials, FAQs, and more — all professionally designed.
  1. Choose a Component or Template
      • Pick the section(s) you want to use for your Notion site.
      • You can use just one or combine multiple components to build a full webpage.
  1. Copy the Notion Block
      • Each component is provided as a public Notion block.
      • Simply click to duplicate or copy it into your own Notion workspace.
  1. Paste the Block into Your Notion Page
      • Go to your Notion site page and paste the copied block where you want it to appear.
  1. Add WebeeUI CSS to Your Site Builder
      • If you're using Super or Bullet.so, open the settings for that site.
      • Find the "Custom Code" or "Site Settings → Code" section.
      • Paste the CSS code provided by WebeeUI. This CSS styles all the components properly.
      • You only need to paste it once — it applies to all components you use.
  1. Publish Your Website
      • Once everything is in place, publish your site via Super or Bullet.so.
      • Your Notion page will now render with WebeeUI’s custom design styles, turning it into a modern, responsive website.

💡 What You Can Build With WebeeUI

WebeeUI gives you the flexibility to create:
  • Startup landing pages with bold headlines, CTA buttons, and feature sections.
  • Freelancer portfolios that showcase your work, testimonials, and pricing.
  • Personal blogs or bio sites with clean layouts and customizable sections.
  • Project or side hustle pages to promote your ideas and link out to relevant resources.
You can mix and match components to suit your style. Want a clean layout with a gradient CTA? A pricing table with hover animations? Just copy, paste, and go.

🧩 Plug & Play Design

No need to write custom HTML or CSS. WebeeUI handles all the design work so you can:
  • Save hours of development
  • Avoid the hassle of coding
  • Focus on content and goals

🚀 Final Thoughts

WebeeUI is built to make Notion site building faster, more professional, and more scalable — especially for users of Super, Bullet.so, and similar tools.
If you want your Notion site to look and feel like a real, modern website without spending days designing or coding, WebeeUI is the perfect tool to get you there in minutes.