strut.io

An open-source UI element library is a collection of individual, ready-made interface pieces—buttons, cards, inputs, toggles, loaders—that you copy into your own project and adapt. A UI framework, by contrast, is a structured system of components, conventions, and often a theming layer that governs how your whole interface is built. The practical difference: an element library gives you a snippet; a framework gives you a way of working. If you need a polished button in ten minutes, reach for the element library. If you're building a 40-screen product with a team, you probably want the framework.

What "open-source UI element library" actually means

The term gets used loosely, so it helps to separate the parts:

• Open-source: the code is publicly available, and the license tells you what you may do with it—copy, modify, redistribute, or use commercially.
• UI element: a single, self-contained piece of interface, usually small enough to read in one sitting. A button with hover states, a pricing card, a search field.
• Library: a browsable, searchable collection of those elements, typically contributed by many different people.

On a site like Uiverse, elements are shared by a community and written in plain CSS or Tailwind. You find one you like, copy the markup and styles, paste them into your project, and adjust colors, spacing, and text to fit. There's no package to install and no build step required—which is exactly the appeal, and also the source of most of the confusion.

Element library vs. UI framework: the core differences

The table isn't a verdict. It's a map of trade-offs. Element libraries win on speed and freedom; frameworks win on consistency and maintenance.

Licensing and attribution: what to check before you paste

This is where people get into trouble, and it's worth slowing down for.

1. Find the license. Every element or collection should state one. Common open-source licenses include MIT, Apache-2.0, and BSD. Some projects use copyleft licenses like GPL, which can impose obligations if you redistribute your code.
2. Understand what the license permits. MIT and Apache-2.0 are permissive: you can typically use the code in commercial and closed-source projects. Copyleft licenses may require you to release derivative source under the same terms.
3. Check attribution requirements. Permissive licenses usually require you to keep the copyright notice and license text somewhere in your project. That's a real obligation, not a formality.
4. Look for per-element terms. On community sites, the site's overall terms and the individual contributor's stated wishes may differ. If a contributor asks for credit, honor it.
5. When in doubt, ask or avoid. If a snippet has no license at all, you don't have clear permission to reuse it. Treat "no license" as "not open source," even if the code is publicly visible.

This article is general information, not legal advice. For commercial products with real exposure, have someone qualified review the licenses you're relying on.

How to use a community element in your project: a practical workflow

Here's a repeatable process that avoids most of the usual mess.

1. Start from a real need, not a browsing session

Decide what you need first—"a compact primary button with a loading state"—then search. Browsing aimlessly produces a pile of pretty snippets that don't fit together.

2. Copy the smallest version that works

Take the markup and the styles. Strip anything you don't need: demo wrappers, extra animations, decorative layers. Less code means fewer surprises.

3. Convert it to your conventions

If your project uses design tokens or CSS variables, replace hard-coded values:

/* Before: hard-coded */
.button { background: #4f46e5; border-radius: 8px; }

/* After: token-based */
.button { background: var(--color-primary); border-radius: var(--radius-md); }

This one step is what keeps a copied element from looking like a foreign object in your UI.

4. Check accessibility before you ship

Community elements vary widely here. Verify at minimum:

• Keyboard focus is visible and the element is reachable by Tab.
• Color contrast meets WCAG AA (4.5:1 for normal text).
• Interactive elements use semantic HTML (<button>, not a clickable <div>).
• Form inputs have associated labels.
• Motion respects prefers-reduced-motion.

5. Test in context

Paste it into a real page with real content. Long labels, small screens, and dark mode break more copied elements than anything else.

6. Note where it came from

Keep a short comment or an internal credits file: source, license, date. Future you—and your legal reviewer—will be grateful.

Where element libraries genuinely shine

• Prototypes and demos: you need something clickable today, not a design system.
• Landing pages and marketing sites: a handful of distinctive elements, each custom.
• Filling gaps: your framework lacks one specific component, and you don't want to build it from scratch.
• Learning: reading well-made CSS is one of the fastest ways to improve.
• Small projects: a personal site doesn't need a theming architecture.

Where they fall short

• Consistency at scale: ten elements from ten contributors rarely look like one product.
• Maintenance: you own every copy. When your design changes, you edit each one.
• Accessibility debt: you inherit whatever the contributor did or didn't do.
• No upstream fixes: a bug fixed in the original won't reach your copy.
• Integration friction: different naming conventions, different units, different assumptions about resets.

When to choose which

Choose an element library when the scope is small, the timeline is short, or you need a few distinctive pieces rather than a whole system.

Choose a framework or design system when multiple people build multiple screens over months, when consistency is a product requirement, or when accessibility and theming need to be guaranteed rather than checked.

A hybrid works well for many teams: adopt a framework for the structural components—forms, navigation, layout—and borrow individual elements for the places where you want personality. Just route every borrowed element through the same token and accessibility checks, so it lands as part of your system rather than beside it.

The short version: open-source UI element libraries are a fast, flexible way to get good-looking interface pieces into a project. They are not a substitute for a design system, and the license and accessibility details are the part worth reading carefully.

Strut is an open-source tool for building spatial presentations: you place content on slides, arrange those slides in 3-D space, and present by flying a camera through that arrangement. It suits anyone who wants a deck that behaves more like a navigable world than a linear sequence — and because the app is open source, you can self-host it for free instead of paying for hosting.

The core idea: slides in 3-D space

A conventional deck is a stack you move through one slide at a time. Strut keeps the slides but changes the layout: each slide is an object positioned in a 3-D scene, and the presentation is a continuous camera flight between them. The site's framing is "presentations with depth" and "built for ideas that don't fit in a straight line."

That has two practical consequences:

• Structure becomes spatial. You decide where slides sit relative to each other, so grouping, distance, and direction can carry meaning.
• Transitions are movement, not cuts. The audience follows a path through the scene rather than watching slides replace one another.

What you can do with it

The AI features are described as grounded in your content, and the pricing page notes AI runs with your own OpenRouter key — so model access is something you bring, not something bundled into the plan.

Who it's for

Strut fits best when your material has a shape that a linear deck flattens — a system with parts that relate to each other, a tour through a set of connected ideas, or a talk where you want to zoom out to context and back in to detail. If your content is genuinely a straight sequence and you never need to show relationships between slides, a conventional slide tool will be simpler.

Pricing and hosting options

The site lists two tiers:

• Free — $0. Unlimited public decks, shareable links, present and export, AI with your OpenRouter key. You can also self-host the open-source app for unlimited, private use at no cost.
• Pro — $2.50/mo per user. Private decks, a custom share domain with white-labeling, unlimited hosted image storage, and AI with your OpenRouter key.

Going Pro requires signing in (GitHub or Google) and then continues to checkout. Note the distinction that matters most: public decks are the free hosted tier, while private decks are a Pro feature — unless you self-host, which the site describes as unlimited and private for free.

How to get started

1. Open the app at strut.io/app.
2. Start free, or choose self-hosting if you need private decks without a paid plan.
3. Build slides and arrange them in 3-D space.
4. If you want AI authoring, supply your OpenRouter key.
5. Present as a camera flight, or share/export the deck.

Key things to check before committing

• Hosting vs. software. The app being open source doesn't mean the hosted service is free without limits — the free hosted tier is limited to public decks.
• AI is bring-your-own-key. Budget for OpenRouter separately from the Strut plan.
• Self-hosting trades cost for effort. Free and private, but you run it yourself.

Open strut.io/app in your browser and start free — no install required. Strut is an open-source tool for spatial presentations: you place content on slides, arrange those slides in 3-D space, and present by flying a camera through that world. The free tier covers unlimited public decks with shareable links, presenting, and export. If you want private decks or a custom share domain, Pro is $2.50/mo per user; if you want unlimited private decks without paying, you can self-host the open-source app for free.

Before you start

• A modern browser. The app runs at strut.io/app.
• A rough idea of your content. You can either build slides manually or generate them from a description.
• Optional: an OpenRouter API key if you want to use AI features. Strut's AI runs on your own OpenRouter key, so bring one if you plan to generate or edit by chat.
• A decision on hosting: use the hosted app (free or Pro) or self-host the open-source version.

Step 1: Open the app and start a deck

Go to strut.io/app and start free. You'll land in the editor where slides live. Nothing about the free tier requires a payment method — "Free to start" and "Self-host the open-source app for free, forever" are both stated on the site.

If you sign in, you can continue with GitHub or Google. Signing in is what routes you toward Pro checkout, so stay signed out if you only want the free tier for now.

Step 2: Place content on slides

Each slide holds rich content. This is the same authoring surface you'd expect from a normal deck tool — the difference is what happens next. Build out the slides you need first; the spatial arrangement is a separate step you can do after the content exists.

Step 3: Arrange slides in 3-D space

This is the core of Strut. Instead of a linear stack, you position slides in three dimensions. The presentation is then a camera flight through that arrangement, so the order and geometry you choose become the narrative.

Two ways to approach this:

• Manual arrangement — you decide where each slide sits in space.
• Auto-arrange — Strut can arrange your deck for you. The site lists "auto-arrange your deck" as an AI capability, so this depends on having AI configured.

Generating slides with AI

If you have an OpenRouter key set up, you can:

• Generate slides from a description.
• Auto-arrange the deck.
• Edit by chat.

The site notes the AI is "grounded in your content," meaning it works from what's already in your deck rather than inventing from nothing.

Step 4: Present as a camera flight

Presenting plays the camera flight through your 3-D world. Because edits are optimistic and sync is live, you can present instantly — the site describes the app as local-first and fast, with "instant presenting."

Step 5: Share or export

Free decks are public and get shareable links, plus present and export. Pro adds:

• Private decks
• Custom share domain and white-label
• Unlimited hosted image storage

Choosing your setup

Pick Free if your decks can be public and you want to start immediately. Pick Pro if you need private decks or a branded share domain. Pick self-hosting if you want unlimited private decks at no cost and are willing to run the open-source app yourself.

Common snags

• AI features don't work. They depend on your OpenRouter key. Without one, expect to build and arrange manually.
• You want private decks on Free. That's a Pro feature — or self-host.
• You're routed to checkout unexpectedly. Signing in leads to Pro checkout; the free tier doesn't require it.

Yes. Strut is an open-source tool for spatial presentations, and the whole app is open source. You can self-host it for free, with unlimited and private decks, or let Strut run it for you as a hosted service. The hosted option has a free tier and a paid Pro tier, while self-hosting is free forever.

What "open source" covers in Strut

According to Strut's site, the entire app is open source — not just a component or plugin. That means the spatial presentation editor, the 3-D slide arrangement, and the camera-flight presenting mode are all part of the codebase you can run yourself.

Strut describes itself as an open-source tool for building spatial presentations: you place content on slides, arrange them in 3-D space, and present as a camera flight through that world. The site also notes the app is "powered by rindle."

Self-hosting: what you get

The site states plainly: "Self-host the open-source app for free, forever." The self-hosted path is described as unlimited and private, for free.

That combination matters if your decks contain material you don't want on someone else's servers, or if you expect to create many decks without hitting a hosted limit. Self-hosting puts the app on infrastructure you control.

The site doesn't publish setup instructions, system requirements, or deployment steps in the material available here, so treat "how to install it" as something to check in the project's own repository and documentation before committing.

Hosted options, for comparison

If you'd rather not run the app yourself, Strut offers to run it for you. The site lists two hosted tiers:

A few things worth noting from this table:

• The free hosted tier is public-only. If your decks need to stay private and you don't want to pay, self-hosting is the route the site points to.
• AI features use your own OpenRouter key on both hosted tiers — Strut isn't bundling AI credits into the price shown.
• Pro is priced per user, so cost scales with the size of your team.

Signing in for hosted use

The hosted app supports sign-in with GitHub or Google. The site notes that when you sign in to go Pro, your work comes with you and you'll go straight to checkout. So account creation and upgrade are tied to one of those two identity providers rather than a separate Strut-specific login.

How to decide

• Choose self-hosting if you want unlimited private decks at no cost and are willing to run the app on your own infrastructure. This is the only path the site describes as both free and private.
• Choose the hosted Free tier if your decks can be public and you want zero setup. You get unlimited public decks, shareable links, presenting, and export.
• Choose Pro if you need private decks, a custom share domain, white-labeling, or hosted image storage, and you'd rather pay $2.50/mo per user than maintain your own deployment.

One caveat: the site's pricing section is headed "Simple pricing," but it doesn't spell out what happens to existing decks if you move between tiers, or what "unlimited hosted image storage" means in practice for very large files. If those details affect your decision, confirm them with Strut before upgrading.

Strut is an open-source tool for building spatial presentations: you place content on slides, arrange those slides in 3-D space, and present by flying a camera through that world. The difference from a regular deck is structural, not cosmetic. A conventional deck is a one-dimensional sequence — slide 1, then 2, then 3 — while a Strut presentation is a navigable space where the path through the material is a design choice you make, not a constraint the format imposes on you.

The core difference: sequence vs. space

In a linear deck, the order of slides is the presentation. The audience sees one frame at a time, and meaning comes from accumulation along a single axis.

In Strut, slides are objects positioned in 3-D space. The presentation is a camera flight through that arrangement, so the audience sees slides in relation to each other — near, far, above, below — before and after the camera settles on any one of them.

What "camera flight" actually changes for the audience

Presenting as a camera flight means the transitions carry information. Moving from one slide to another can show the audience where the next idea sits relative to the last — a zoom out to reveal a cluster, a pan across a row of related points, a dive into one detail.

That is the practical payoff of the format. In a linear deck, a transition is dead time. In Strut, the movement itself can communicate grouping and hierarchy, which is why the tool describes itself as built for "ideas that don't fit in a straight line."

When a spatial presentation is the better choice

Strut's format earns its keep when the relationships between ideas matter as much as the ideas themselves. For example:

• A roadmap where several workstreams run in parallel and occasionally intersect.
• A system or architecture overview where components sit at different levels of abstraction.
• A research summary where findings cluster into themes rather than forming one chain of argument.
• A pitch where you want to zoom from a wide market view into a single product detail and back out.

A regular deck still wins when the content genuinely is a sequence — a step-by-step tutorial, a chronological narrative, or a talk where each point depends on the one before it. Forcing spatial structure onto linear content adds navigation cost without adding meaning.

What stays familiar

The spatial format does not throw out slide conventions. You still place rich content on slides, and the tool is positioned as "everything a deck should be" — so the unit of authoring is still a slide, not a free-floating 3-D object. What changes is how those slides are arranged and traversed.

Strut also supports generating slides from a description, auto-arranging a deck, and editing by chat, grounded in your content. Those features matter more in a spatial format than a linear one, because arranging slides in 3-D by hand is the part most likely to slow you down.

Availability and cost, as stated

• Free tier — $0: unlimited public decks, shareable links, present and export, and AI using your own OpenRouter key. You can also self-host the open-source app for free, unlimited and private.
• Pro — $2.50/mo per user: private decks, a custom share domain and white-labeling, unlimited hosted image storage, and AI with your OpenRouter key.

The entire app is open source, so self-hosting is a real alternative to the hosted plans rather than a trial. Signing in to go Pro is handled through GitHub or Google.

The short version

A regular deck answers "what comes next?" Strut answers "where does this sit?" If your material has a natural order, a linear deck is simpler and faster to build. If your material has a shape — clusters, layers, parallel tracks — arranging slides in 3-D space and presenting as a camera flight lets the structure itself do some of the explaining.