Features

Many apps, any framework, one product

Shellui is a shell for microfrontends. Each app runs in its own iframe, built with the framework your team prefers and deployed on its own schedule. The shell owns navigation, layout, theme, and language, so people move between apps as if they were one.

How the pieces fit

You list your apps in shellui.config.json. The shell draws the sidebar and loads the selected app by URL in a sandboxed iframe. Your app talks back through @shellui/sdk, which wraps postMessage with an exact target origin.

  • React
  • Vue
  • Angular
  • Next.js
  • Svelte
  • and more
The shell
@shellui/core renders navigation, layouts, settings, toasts, and dialogs. You configure it, you do not rebuild it.
Your apps
Any web app with a URL. Keep its repository, framework, and deployment. It only needs to allow iframe embedding.
The SDK
One package connects an app to the shell: read the theme and language, open a dialog, navigate to another app.
One Shellui shell in the sidebar inset layout hosts four apps, each in its own sandboxed iframe: Chat built with React, Docs with Vue, Analytics with Svelte and Admin with Angular. The shell draws the navigation, Settings, the signed in user and a toast from shellui.toast().AcmeAppsChatDocsAnalyticsAdminChatDocsAnalyticsAdminSettingsLMLena MartinChatReactSRCan we ship the onboarding today?Yes, the review is done.SRPerfect, I will tell the team.Thanks, Sara.Write a messageDocsVueGetting started$ shellui initAdd an appChanges savedshellui.toast()ChatReactiframeDocsVueiframeAnalyticsSvelteiframeAdminAngulariframe One Shellui shell hosts Chat, Docs, Analytics and Admin, apps built with React, Vue, Svelte and Angular, each in a sandboxed iframe. The shell draws the navigation and a toast.AcmeChatDocsAnalyticsAdminChatDocsAnalyticsAdminLMChatReactSRCan we ship today?Yes, review done.DocsVueGetting started$ shellui initChanges saved

Built with shadcn/ui, open to any stack

The Shellui interface uses shadcn/ui and Tailwind CSS. Your apps do not have to. The shell shares its theme as CSS variables with the shadcn/ui names, and the SDK applies them to your app, light or dark.

When people switch theme in the shell, every app follows. Pick the path that matches your app.

Already on shadcn/ui

Same token names. Your components match the shell with no mapping.

Tailwind CSS

Point your theme colors at the shell variables and your utilities follow every theme switch.

Any other stack

Vue, Svelte, Angular, or plain CSS. Read the same variables wherever you want the shell colors.

Starters for React, Vue, Svelte, Angular, Next.js, Nuxt, Alpine.js, and Tauri come connected. The themes guide shows the code.

Choose a layout for your product

Pick one layout for the whole product and every app inherits it. Try them below to see the shell rearrange around your app.

Every layout marks the current page with your theme's primary color. On macOS, the Tauri desktop app keeps the default window controls in a 32px title strip.

Apps that fill their iframe follow every layout. windows is a proof of concept and not ready for production.

Layout

Pick sidebar, sidebar-inset, app-bar, app-bar-inset, floating, fullscreen, or windows in shellui.config.json.

shellui.config.json { "layout": "sidebar" }

Shared components, drawn by the shell

Toasts, dialogs, modals, and drawers open from any app with one SDK call. Shellui draws them in the shell, outside the iframe, so they cover the full window and look the same in every app. Hover or focus a card to play it.

Toaster

Show a success, error, or action notification above every app in the shell.

Call shellui.toast() with a title, description, and type.

Shellui toaster: a stack of toast notifications

Dialog

Ask for confirmation before a destructive action, outside the app iframe.

Call shellui.dialog() with a mode and onOk and onCancel callbacks.

Shellui dialog: delete project confirmation

Modal

Open a settings page or form on top of the current app.

Call shellui.openModal("/settings") to load that route of your app in a modal.

Shellui modal: Themes settings

Drawer

Slide in details or filters as a panel that floats over the page.

Call shellui.openDrawer() with a url, position, and size.

Shellui drawer: a floating language and region panel

Action buttons

Add a back button, a title, up to 8 trailing actions, and a primary floating button to the shell chrome. On narrow screens, extra trailing actions move into a More menu. Some layouts integrate them deeper: Windows shows them in each window title bar, and Sidebar on mobile shows them in its top bar.

Call shellui.actions.set() with back, title, trailing, and primary items, each with an optional variant.

Shellui action buttons: title, back, trailing actions, variants and primary button

Your brand, their language, every app

Pick a theme and a language in the shell. Every shadcn/ui component in every app follows with the same colors, corners, and words.

Need your own look? Create a custom theme and set every variable, from colors and fonts to radius, to match your existing brand. Create a custom theme.

Theme

Language

Create project

Deploy your new app in one click.

Name
My new app
Framework
React
CancelDeploy

Notifications

Email updates
Push alerts

October 2026

‹›
MoTuWeThFrSaSu282930123456789101112131415161718192021222324252627282930311
NewBetaDraftFailed

Event created

Sunday, October 25 at 9:00

Visitors · Last 7 days

12,480

+12.5% this week

AccountPassword
Volume

Team members

Invite your team.

SB

Sophie Bernard

sophie@acme.dev
Owner
LM

Lena Meier

lena@acme.dev
Member
LanguageEnglish

Settings your users already know

Every Shellui product ships with a settings dialog. People open it from the sidebar to pick a theme, choose their language, or turn on developer mode.

Your apps add their own panels under Applications, so all settings live in one place. A change applies to every app at once. Add an application settings panel.

A Shellui app with its sidebar. Clicking Settings opens the built-in settings dialog over the whole app. It shows Appearance, where the color theme changes, Language and region, where English switches to French, and Advanced, where developer mode turns on, then closes.AcmeHomeAccueilChatChatDocsDocsSettingsParamètresChatApplicationsApplicationsChatChatPreferencesPréférencesAppearanceApparenceLanguage & regionLangue et régionSystemSystèmeAdvancedAvancéDeveloperDevelopSettings› AppearanceModeLightDarkAutomaticColor ThemeAmber MinimalRecommendedAmethyst HazeRecommendedSettings› Language & regionParamètres› Langue et régionLanguageLangueEnglishFrançaisRegionRégionTimezoneFuseau horaireEurope/ZurichSettings› AdvancedError reportingAllow this app to send error reports.Developer modeActiveUnlocks technical tools and diagnostics.

Try Shellui in the playground

Explore a live Shellui app with no install and no scaffolding.

Open playground

Next, see how Authentication handles sign-in, protected routes, and identity-service.