synergycodes · jimmeryn · Feb 24, 2026 · Feb 23, 2026 · Feb 24, 2026 · Feb 24, 2026
@@ -1,6 +1,6 @@
-[//]: # "This README file is part of the Overflow UI documentation website (check overview.mdx)"
+[//]: # 'This README file is part of the Overflow UI documentation website (check overview.mdx)'
 
-A React library for creating node-based user interfaces and diagram-driven apps. Built to work seamlessly with React Flow, it provides a collection of ready-to-use components and templates that simplify the development of visual editors, workflows, and interactive diagrams.
+A React Flow components library for creating node-based user interfaces and diagram-driven apps. Built to work seamlessly with React Flow, it provides a collection of ready-to-use components and templates that simplify the development of visual editors, workflows, and interactive diagrams.
 
 Developed and maintained by **[Synergy Codes](https://www.synergycodes.com/)**.
 
@@ -52,7 +52,7 @@ import { Input } from '@synergycodes/overflow-ui';
 <Input value={value} onChange={onChange} />;
 ```
 
-## Customization
+### Customization
 
 Each Overflow UI component uses CSS variables that are derived from primitive values.
 
@@ -72,11 +72,10 @@ or a derived value used by the selected component:
 }
 ```
 
-### Overflow UI css layers
+### Overflow UI CSS layers
 
 Overflow UI uses [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to separate its styles from yours. By default, CSS styles outside of any layer take precedence over what Overflow UI defines, so your styles will always win the specificity war. You can customize Overflow UI components with simple `input {}`.
 
-
 ```css
 @layer ui.component {
   .separator {
@@ -86,14 +85,34 @@ Overflow UI uses [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@
 ```
 
 Default Overflow UI order:
+
 ```css
 @layer ui.base, ui.component;
 ```
 
 If you want to use layers in your code, just add them at the end.
 
-## Showcase
+### Showcase
 
 **[Workflow Builder](https://www.workflowbuilder.io/)** is a frontend-focused starter app for building workflows, offering core features, best practices, and easy backend integration for faster client delivery.
 
 https://www.workflowbuilder.io/
+
+**Browse the list of components and discover solutions tailored to your needs. If you have questions or suggestions, feel free to reach out.**
+
+### FAQ
+
+**1. What is the Overflow UI component library?**\
+Overflow UI is an open-source component library designed to enrich the user interface of diagramming applications. It includes both standard UI components – such as buttons, modals, and menus – as well as diagram-specific components like nodes and edges. All components follow the Overflow Design System, ensuring a consistent and modern look for your application.
+
+**2. Where should I start with Overflow libraries?**\
+We encourage you to explore both libraries – each component comes with its own documentation, usage examples, and implementation guidelines to help you get started quickly.
+
+**3. How do you ensure transparency in the direction of the UI components library?**\
+The UI Components library is developed iteratively. New features and improvements are released regularly, and all key design and implementation decisions are documented in our decision logs. This gives you full insight into the direction of development and the rationale behind every change.
+
+**4. Can I safely override styles without fighting specificity?**\
+Yes. Overflow UI uses CSS layers (@layer ui.base, ui.component). Your non-layered styles or layers declared later take precedence, so simple selectors win.
+
+**5. Do you have a design system available?**\
+Yes, we have a design system available in Figma, and we can provide it as a PRO component.
@@ -3,24 +3,23 @@ sidebar_position: 0
 title: Overview
 slug: /authored/overview
 hide_table_of_contents: true
+show_navigation_tabs: true
 ---
 
 import { OverflowUIBanner } from '@site/src/components/overflow-ui-banner/overflow-ui-banner'
 
 <OverflowUIBanner />
 
-# Components that accelerate your development
+# UI Components for React Flow
 
-Welcome to the UI Components documentation! Here you’ll find everything you need to know about our user interface components, including usage examples and best practices.
+Welcome to the Overflow UI Components documentation! Here you’ll find everything you need to know about our user interface components, including usage examples and best practices.
 
-## Explore Our Libraries
+## Explore Overflow open-source components
 
 - [Diagram Components](/ui-components/category/diagram-components) – A set of ready-made elements for building and visualizing diagrams, making it easy to present complex processes and structures.
 - [UI Components](/ui-components/category/ui-components) – Universal interface components you can seamlessly integrate into your applications for consistent, accessible, and modern design.
 
-We encourage you to explore both libraries—each component comes with its own documentation, usage examples, and implementation guidelines to help you get started quickly.
-
-## Iterative Development and Transparency
+## Iterative development
 
 The UI Components library is developed iteratively. New features and improvements are released regularly, and all key design and implementation decisions are documented in our decision logs. This gives you full insight into the direction of development and the rationale behind every change.
 

@@ -3,6 +3,8 @@ sidebar_position: 1
 title: Quickstart
 slug: /authored/quickstart
 hide_table_of_contents: true
+show_navigation_tabs: true
+highlight_overview_tab: true
 ---
 
 import README from '@site/../../README.md';

@@ -1,11 +1,11 @@
-import { Description } from '../description/description';
-import { PropMap, PropsList } from '../props-list/props-list';
 import {
   OverflowUICSSRelativePath,
   OverflowUITSXRelativePath,
 } from '@site/generated/path-types';
-import { CSSVariablesList } from '../css-variable-list/css-variable-list';
 import { Playground } from '../code-playground/code-playground';
+import { CSSVariablesList } from '../css-variable-list/css-variable-list';
+import { Description } from '../description/description';
+import { PropMap, PropsList } from '../props-list/props-list';
 
 import styles from './component-page.module.css';
 

@@ -0,0 +1,72 @@
+.tabsContainer {
+  --transition: all 0.2s ease-in-out;
+
+  display: flex;
+  width: 100%;
+  gap: 16px;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.tabItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  padding: 16px;
+  border: 1px solid var(--ax-ui-stroke-primary-default);
+  border-radius: 6px;
+  text-decoration: none;
+  color: var(--ax-txt-primary-default);
+  font-weight: 600;
+  font-size: 16px;
+  transition: var(--transition);
+  position: relative;
+  background-color: transparent;
+  line-height: 100%;
+}
+
+.tabItem:hover {
+  border-color: var(--ax-txt-secondary-default);
+  text-decoration: none;
+  color: inherit;
+}
+
+.tabItem[aria-current='page'],
+.tabItem.active {
+  border-color: var(--ifm-color-primary);
+  background-color: var(--ax-colors-acc1-500-10);
+  color: var(--ifm-color-primary);
+}
+
+.radioIndicator {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--ax-txt-secondary-default);
+  border-radius: 50%;
+  position: relative;
+  flex-shrink: 0;
+  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tabItem:hover .radioIndicator {
+  border-color: var(--ax-txt-primary-default);
+}
+
+.tabItem[aria-current='page'] .radioIndicator,
+.tabItem.active .radioIndicator {
+  border-color: var(--ifm-color-primary);
+}
+
+.tabItem[aria-current='page'] .radioIndicator::after,
+.tabItem.active .radioIndicator::after {
+  content: '';
+  width: 10px;
+  height: 10px;
+  background-color: var(--ifm-color-primary);
+  border-radius: 50%;
+  display: block;
+}
@@ -0,0 +1,73 @@
+import styles from './navigation-tabs.module.css';
+
+interface TabItem {
+  id: string;
+  label: string;
+  href: string;
+}
+
+interface NavigationTabsProps {
+  tabs: TabItem[];
+  activeTabId?: string;
+}
+
+function NavigationTabsComponent({ tabs, activeTabId }: NavigationTabsProps) {
+  return (
+    <nav className={styles['tabsContainer']}>
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeTabId;
+        if (isActive) {
+          return (
+            <div
+              key={tab.id}
+              className={`${styles['tabItem']} ${styles['active']}`}
+              aria-current={'page'}
+              aria-label={tab.label}
+            >
+              <span className={styles['radioIndicator']} aria-hidden="true" />
+              <span>{tab.label}</span>
+            </div>
+          );
+        }
+
+        return (
+          <a
+            key={tab.id}
+            href={tab.href}
+            className={styles['tabItem']}
+            aria-label={tab.label}
+          >
+            <span className={styles['radioIndicator']} aria-hidden="true" />
+            <span>{tab.label}</span>
+          </a>
+        );
+      })}
+    </nav>
+  );
+}
+
+export function NavigationTabs({
+  isOverviewActive,
+}: {
+  isOverviewActive: boolean;
+}) {
+  const items = [
+    {
+      id: 'ui-components',
+      label: 'Diagram and UI Components Quickstart',
+      href: '/ui-components/authored/quickstart',
+    },
+    {
+      id: 'interaction-components',
+      label: 'Interaction Components Quickstart',
+      href: '/premium',
+    },
+  ];
+
+  return (
+    <NavigationTabsComponent
+      tabs={items}
+      activeTabId={isOverviewActive ? 'ui-components' : undefined}
+    />
+  );
+}
@@ -7,9 +7,9 @@ export function OverflowUIBanner() {
         <div className={styles['text-container']}>
           <p className={styles['title']}>React Flow UI Components</p>
           <p className={styles['description']}>
-            Build better and engage your customers across all channels with our
-            API reference documentation, quickstarts, SDKs and multi- language
-            code samples.
+            Start building with open-source UI components for React Flow.
+            Ready-to-use documentation, code examples, and API references help
+            you reduce setup time and scale faster.
           </p>
           <div className={styles['background']} />
         </div>

@@ -0,0 +1,80 @@
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import { useWindowSize } from '@docusaurus/theme-common';
+import ContentVisibility from '@theme/ContentVisibility';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import DocItemContent from '@theme/DocItem/Content';
+import DocItemFooter from '@theme/DocItem/Footer';
+import type { Props } from '@theme/DocItem/Layout';
+import DocItemPaginator from '@theme/DocItem/Paginator';
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import clsx from 'clsx';
+import { type ReactNode } from 'react';
+
+import { DocFrontMatter } from '@docusaurus/plugin-content-docs';
+import { NavigationTabs } from '@site/src/components/navigation-tabs/navigation-tabs';
+import styles from './styles.module.css';
+
+function useDocTOC() {
+  const { frontMatter, toc } = useDoc();
+  const windowSize = useWindowSize();
+
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+
+  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
+
+  const desktop =
+    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
+      <DocItemTOCDesktop />
+    ) : undefined;
+
+  return {
+    hidden,
+    mobile,
+    desktop,
+  };
+}
+
+type DocFrontMatterExtended = DocFrontMatter & {
+  show_navigation_tabs?: boolean;
+  highlight_overview_tab?: boolean;
+};
+
+export default function DocItemLayout({ children }: Props): ReactNode {
+  const docTOC = useDocTOC();
+  const { metadata, frontMatter } = useDoc();
+  const customFrontMatter: DocFrontMatterExtended = frontMatter;
+
+  const showNavigationTabs = customFrontMatter.show_navigation_tabs === true;
+  const isOverviewActive = customFrontMatter.highlight_overview_tab === true;
+
+  return (
+    <>
+      {showNavigationTabs && (
+        <div className={styles['stickyTabsContainer']}>
+          <NavigationTabs isOverviewActive={isOverviewActive} />
+        </div>
+      )}
+      <div className="row">
+        <div className={clsx('col', !docTOC.hidden && styles['docItemCol'])}>
+          <ContentVisibility metadata={metadata} />
+          <DocVersionBanner />
+          <div className={styles['docItemContainer']}>
+            <article>
+              <DocBreadcrumbs />
+              <DocVersionBadge />
+              {docTOC.mobile}
+              <DocItemContent>{children}</DocItemContent>
+              <DocItemFooter />
+            </article>
+            <DocItemPaginator />
+          </div>
+        </div>
+        {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,34 @@
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}
+
+.stickyTabsContainer {
+  position: sticky;
+  top: var(--ifm-navbar-height);
+  z-index: 10;
+  background-color: var(--ifm-background-color);
+  padding: 16px;
+  margin-bottom: 1rem;
+}
+
+.theme-doc-sidebar-container {
+  position: relative;
+  z-index: 100;
+}
+
+.docItemCol {
+  max-width: 100% !important;
+}
+
+.docItemContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}