FINESOFT COMPONENTS / DOCUMENTATION

Composable components.
Built for the web.

A Stencil Web Components library with an independent implementation, optional themes, and React reference examples from Base UI.

Explore the components ↗View FineSoft source ↗

QUICK START / HTML

Add one script. Start building.

Load FineSoft Components directly from this site. No package install or build tool is required. The script registers the fs-* elements and loads each component when it is used.

Module script

<script type="module"
  src="https://components.finesoft.org/cdn/finesoft-components/finesoft-components.esm.js"
></script>

Add data-fs-theme="base-ui" to your <html> element for the built-in theme. No extra stylesheet is needed; omit the attribute to provide your own styles.

Open the HTML example ↗Browse Stencil examples ↗

Copy a complete HTML page

Complete HTML example

<!doctype html>
<html lang="en" data-fs-theme="base-ui">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>FineSoft Components · Plain HTML example</title>
    <script type="module"
      src="https://components.finesoft.org/cdn/finesoft-components/finesoft-components.esm.js"
    ></script>
    <style>
      body { max-width: 36rem; margin: 4rem auto; padding: 0 1.5rem; font-family: system-ui, sans-serif; }
      h1 { font-size: 1.75rem; }
      p { line-height: 1.6; }
      fs-accordion-panel p { margin: 0; padding: 1rem; }
    </style>
  </head>
  <body>
    <h1>FineSoft Components</h1>
    <p>A working Web Component, loaded with one script tag.</p>
    <fs-accordion-root>
      <fs-accordion-item value="getting-started">
        <fs-accordion-header>
          <fs-accordion-trigger>Do I need a build tool?</fs-accordion-trigger>
        </fs-accordion-header>
        <fs-accordion-panel>
          <p>No. Add the module script and use the fs-* elements in your HTML.</p>
        </fs-accordion-panel>
      </fs-accordion-item>
      <fs-accordion-item value="project">
        <fs-accordion-header>
          <fs-accordion-trigger>Is this the official Base UI library?</fs-accordion-trigger>
        </fs-accordion-header>
        <fs-accordion-panel>
          <p>FineSoft Components is an independent Stencil implementation based on Base UI.</p>
        </fs-accordion-panel>
      </fs-accordion-item>
    </fs-accordion-root>
  </body>
</html>

This URL follows the latest successful deployment. Use a current browser with JavaScript modules and Web Components support. A legacy nomodule build is not provided.

01 / IMPLEMENTATION

FineSoft Stencil

Composable custom elements, public component parts, and an optional Base UI theme. See the Stencil column for this project's implementation.

02 / REFERENCE

Side by side

Compare FineSoft examples with frozen Base UI React 1.8.0 examples. React API text is preserved as an upstream reference.

03 / INTEGRATION

Your application

Explore styling, composition, and component behavior before integrating the elements into your own application.

Read the styling guide ↗

Independent project. Clear origins.

FineSoft Components is based on the open-source Base UI project. This site is maintained for FineSoft Components; it is not the official Base UI website and is not affiliated with or endorsed by the Base UI team.

Looking for the original React library? Visit the official Base UI documentation ↗