How do we reliably use third-party Svelte UI component libraries inside a Hugo project?

support
1

Hi everyone,
We are building a Hugo-based car listings website and we want to enhance our frontend using modern UI component libraries (dropdowns, modals, etc.) built with Svelte.

What we tried so far (and failed):

We attempted integrating several libraries:

  • Flowbite-Svelte

  • Origin UI Svelte

  • Material UI for Svelte

  • (even basic Svelte component imports sometimes break)

But nothing worked reliably.
Most attempts resulted in issues like:

  • Rollup not resolving components

  • CSS not being imported into the build

  • Svelte 4 vs Svelte 5 compatibility problems

  • Components not rendering, even though Svelte itself works

  • Bundling errors when libraries import CSS or nested components

  • Missing globals / external module warnings

  • Build succeeds but UI components never show in the DOM

At this point we feel there’s something fundamentally missing in how we’re setting up Svelte inside Hugo.

Our project structure

├── assets/
│   ├── css/
│   │   └── main.css
│   └── js/
│       ├── search.js
│       └── svelte/
│           ├── main.js
│           └── Dropdown.svelte

├── hugo.toml
├── package.json
├── package-lock.json
├── rollup.config.js
├── .gitignore

We compile Svelte using Rollup, and load the final bundle in baseof.html.

What works

A simple custom Svelte component (like a bare <select> dropdown) works fine.

But as soon as we import any third-party UI library component:

import { DropdownMenu } from "originui-svelte/components/ui/dropdowns";

or

import { Dropdown, DropdownItem } from "flowbite-svelte";

—Rollup fails OR the component renders nothing.

What we want to know

How can we correctly integrate third-party Svelte UI component libraries inside a Hugo project?

Specifically:

  1. Is Rollup the wrong choice for bundling Svelte inside Hugo?
    Should we switch to Vite or esbuild?

  2. Do we need special Rollup plugins to handle Svelte library imports (CSS, assets, etc.)?

  3. How do other Hugo developers structure their projects when mixing Svelte + Hugo?

  4. Is there a recommended pattern for using external Svelte components in Hugo’s assets/ folder?

  5. Should we keep vendor libraries outside /assets/js?

We see tons of examples for using Svelte or Hugo individually, but almost nothing for Hugo + Svelte + UI libraries together.

Any guidance from the community, best practices, examples, or even a minimal “Svelte UI library inside Hugo” starter repo would help us enormously.

Thank you! :folded_hands:

2

A bit off-topic, but it would be great if Hugo started supporting frontend frameworks by default, such as reactjs and svelte.

And it’s going to be not great, but fantastic, if Hugo brings island architecture to GoHugo, where the whole site is static, and specific components can be rendered client-side or server-side.

Please, Hugo developers, bring island components, make it a full-stack framework :pleading_face::pleading_face::pleading_face:

1 Like
3

From the “symptoms” you describe I would assume that your nodeResolve comonjs setup is incorrect to start with.

I wouldn’t say it’s the wrong choice, but is definitely more work. You will need to configure plugins and lock the Svelte version to the one from your UI library.

If you are willing to change, Vite + Svelte makes a lot more sense. With Vite, features like CSS imports, PostCSS and HMR they just works.

Without knowing what you are already using, it’s hard to say for sure. For example do you use rollup-plugin-css-only? However, you will definitely need plugins to bundle Svelte components with Rollup.

I would create a clear separation, something like this:

hugo/
├── assets/
│   ├── css/
│   └── js/               # vanilla js, Hugo pipes
├── static/
│   └── svelte-output/    # Svelte app builds here 
├── svelte/               # Svelte source 
│   ├── src/
│   ├── package.json
│   └── vite.config.js
├── layouts/
│   └── partials/
│       └── svelte-modal.html
└── hugo.toml

Svelte builds into /static/svelte-output

cd svelte
npm run build

and in the hugo template/partial:

<link rel="stylesheet" href="/svelte-output/style.css">`
<script type="module" src="/svelte-output/assets/index.js"></script>
<div id="svelte-modal"></div>

And Hugo will serve only static bundled output.

Yes, use the /assets/js directory for Hugo Pipes and non-Svelte assets.

4

okay thanks for the response !
and , so which library you will recommend to use for UI components and how do i use it
like you can take the example of how we use MUI in react

5

For this use case I would use shadcn-svelte and avoid issues of mixed resets or conflicting styles.

With my setup above:

  • One tailwind installation inside the Vite/Svelte folder configured to scan ../../layouts/**/*.html and any other Hugo files you need (../../content/**/*.md). Single point of truth for styles so no tree-shaking issues.
  • Build the Svelte component as you normally would
  • Create a main Svelte script that checks/mounts components to specific #IDs.
  • In Hugo add the component ID containers to your layout and load the Svelte Js and CSS from the static/svelte-output/

So instead of mounting everything to a single #root like in React you mount each Svelte component to island IDs.

Hugo provide layout and content, Svelte the interactivity and one Tailwind build to style them all.