Component Library
Explore our early collection of components and experiments. It's a bit messy right now, but we'll be refining it and adding more over time — think AI chats, data dashboards, custom e-commerce tools, and beyond. Bookmark this page and watch it evolve!
Filter by tags:
Flowcode Core
Core authentication, posts, and navigation components
Login Form
AuthenticationUser authentication form with email/password and optional Google OAuth
Registration Form
AuthenticationUser registration form with Better Auth integration
Post Editor
ContentRich text editor for creating and editing blog posts with auto-save
Navigation
NavigationGlobal navigation bar with authentication-aware menu items
Dashboard
DashboardUser dashboard displaying profile information and quick actions
Hello User
UserSimple greeting component showing current user's name
Flowcode Analytics
Charts, metrics, and data visualization components
Chart Test
ChartsTest component demonstrating various chart types and configurations
Pie Chart
ChartsInteractive pie chart for displaying proportional data
Bar Chart
ChartsVertical bar chart for comparing data across categories
Flowcode Interactive 3D
3D models and interactive experiences
Lanyard
3D3D physics-based lanyard simulation with configurable gravity and appearance
Blue Slider
InteractiveSlider component controlling shared blue value state (Zustand demo)
Red Slider
InteractiveSlider component displaying red value (inverse of blue, Zustand demo)
LaserFlow Hero
3D EffectsInteractive 3D laser flow effect with animated hero section and customizable title display
webcn Landing Page
Landing page components for webcn - Webflow full-stack React component framework
webcn Architecture
LandingAnimated diagram showing the full-stack architecture from Webflow to database
webcn Blog CTA
LandingCall-to-action card linking to technical blog post
Component Card
LandingIndividual component card for collection lists - displays component preview, name, category, and description
webcn Demo Section
LandingDemo section showcasing the blogflow full-stack application
webcn Features
LandingFeature grid showcasing key features with icons and descriptions
Features Summary
LandingHigh-level features summary section highlighting modular, typesafe, and authenticated architecture
webcn Footer
NavigationFooter section with brand, links, and social icons
webcn Hero
LandingHero section with gradient backgrounds, badge, and CTA buttons
webcn Hub Dashboard
LandingInteractive dashboard preview for managing libraries and connecting services
webcn Hub Dashboard (Image)
LandingImage-based variant of the management dashboard. Replaces interactive UI with a configurable screenshot or GIF.
webcn Navbar
NavigationFixed navigation bar with logo, configurable links, and GitHub button
webcn Story Section
LandingStory section explaining the hackathon challenge, vision, and impact
webcn Styling Control
LandingInteractive demo showcasing design system integration with shadcn/ui and tweakcn
webcn Styling Control (Image)
LandingImage-based variant showcasing design system integration. Replaces live theme preview with a configurable GIF or static image.
webcn Video Section
LandingVideo section with YouTube embed - click thumbnail to play
webcn Waitlist
LandingWaitlist capture section that imports from the waitlist library (tests cross-library bundling)
Flowcode Waitlist
Email waitlist capture and admin management components
Component Registry Dashboard
Component library viewer and documentation interface
Component Card
RegistryIndividual component card for showcasing components in collection lists - displays component preview, name, category, and description
Component Grid
RegistryGrid view of all components organized by library
Component Detail Header (Centered)
Registry DashboardCentered variant of header section showing component name, description, library badge, and tags. Supports CMS data injection.
Component Detail Preview (Slot)
Registry DashboardComponent preview card with slot for custom images. Includes hover overlay and footer button.
Component Detail Props
RegistryDocumentation table showing component props with types, descriptions, and default values
Component Detail Usage
RegistryCode example showing how to use the component with copy button
Component Detail Sidebar
RegistrySidebar showing component metadata like library, category, dependencies, and backend requirements
BlogFlow Demo
Complete blog platform components including posts management, profiles, and public blog views
Hero Section
LayoutLanding page hero section with auth-aware CTAs and feature cards
Dashboard
Content ManagementMain dashboard view with stats, recent posts, and quick actions
Navigation
LayoutResponsive navigation bar with authentication state management
Post Editor
Content ManagementRich text editor with auto-save for creating and editing blog posts
Posts List
Content ManagementUser's posts management dashboard with filtering, search, and CRUD operations
Profile Editor
User ProfileUser profile editor for managing display name, bio, avatar, and website
Public Posts List
Public BlogPublic blog index with published posts, search, and pagination
Post View
Public BlogIndividual post view with full content, author info, and edit capability. Reads post ID from URL ?id=POST_ID (preferred) or from prop.
Early Access
Get early access to flowcode and be part of the future of Webflow development
Reserve Your Spot
We respect your privacy. No spam, ever.
Be the first to join the waitlist