Fandry UI
start

Getting started

One source, one npm package, two platforms. Pick the one you build on; the components are the same.

npm

LWR / LWC OSS

Install one npm package, point your project at it, and use <fandry-*> components. Your bundler ships only the ones you use.

sfdx

Salesforce DX

The platform has no bundler and cannot import npm packages, so the CLI copies components into your project as source you own, with everything they depend on.

Choose your platform

Link to section Choose your platform

Fandry UI is a single package, fandryui. What differs is how your platform resolves code, so what you run and what you write differs slightly.

At a glance

Link to section At a glance LWR / LWC OSS 
npm install fandryui
npx fandry init

<fandry-button>Save</fandry-button>
​ Salesforce DX 
npm install --save-dev fandryui
npx fandry init
npx fandry add button table

<c-fandry-button>Save</c-fandry-button>
​

LWR and LWC OSS let a package bring its own namespace and have a bundler that ships only what you use, so the whole package is installed and you write <fandry-*>. Salesforce code lives in the default c namespace and has no bundler or npm resolution, so the CLI copies the components you choose, with their dependencies, into your project and you write <c-fandry-*>. It is the same source either way.

How Fandry is designed

Link to section How Fandry is designed

Fandry UI is a composable component library for Salesforce LWC, for products and sites that should look like themselves, not like the platform. It is an opinionated design system with defined ways to change it, not a set of components with a prop for everything.

  • Sensible defaults. Every component works and looks finished with no configuration.

  • Composition over configuration. Variations come from slots and composition; a prop is added only for a genuinely binary behavior like disabled.

  • Customization in steps. Set --fd-* tokens, restyle a ::part(), replace a slot or messages text, extend a state class, or copy the source. Go only as far as you need.

Why Fandry UI?

The reasoning, the trade-offs and how Fandry differs from Lightning Base Components are on the Why Fandry page (/why-fandry).

What stays true on both

Link to section What stays true on both

  • Real LWC components. Readable source you can open, not a black box.

  • You own the application: layout, state, data, routing. There is no Fandry shell, router or bootstrap.

  • Use one component or thirty. Nothing forces you to adopt the whole system.

  • No runtime registry, loader or network fetch for components or icons.

Ready to build? Browse every component, its props and examples under Components.