Bundles & Downloads

§Three sizes

All three load the same component code. They differ only in how many files a page requests and how much of the system it downloads. Every way starts with core.css (tokens + utilities); the section and per-component ways also load core.js (the df$ runtime every component binds to), which all.js already embeds.

The Installation page covers all and per-component loading; this page covers the section bundles and the downloads.

§The section bundles

Every component sits in exactly one sidebar section, and every sidebar section that holds components ships as one bundle: dist/sections/{section}.css, plus .js when a member has behavior, plus the minified twins and source maps. The WYSIWYG Editors section is the extra bundle components/wysiwyg.* that every page of this documentation loads. A section bundle holds only its own components, so loading several sections never ships a component twice.

Needs lists the other sections whose components the section's documented markup uses: a Website pricing block is built from Buttons and Badges, a Dialog from Buttons. The list is computed from every html block of the members' component skills, plus the markup their JavaScript writes. Primitives appears almost everywhere because it carries Typography, the page's base text size. Sizes are minified + gzip-compressed, CSS and JS together, without core.

flowchart LR
    Core["core.css + core.js<br/>tokens, utilities, df$ runtime"] --> Needs["dependent code:<br/>everything from the section's Needs column"]
    Needs --> Section["the complete section bundle"]

§From the CDN

Load core, then the sections it needs, then the section - the order in the diagram. For the Overlays section that is 90.4 KiB minified and compressed, against 288.1 KiB for core.css + all.css + all.js:

<!-- Overlays: core first, then the sections it needs, then the section -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/components/core.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/sections/primitives.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/sections/actions.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/sections/data-display.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/sections/overlays.min.css">

<script type="module" src="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/components/core.min.js"></script>

<script type="module" src="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/sections/primitives.min.js"></script>

<script type="module" src="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/sections/actions.min.js"></script>

<script type="module" src="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/sections/data-display.min.js"></script>

<script type="module" src="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/sections/overlays.min.js"></script>

Each section bundle binds to the runtime core.js installed, so core.js comes first; its components then initialize themselves, including ones added to the page later. Replace @latest with a release tag to lock the version (see Pinning a version), and drop .min from a file name for the readable source.

§With a package manager

The npm package ships the same dist/ tree. Import the same files in the same order, once, in the app entry:

// Overlays: core first, then the sections it needs, then the section

import 'defuss-shadcn/dist/components/core.css';

import 'defuss-shadcn/dist/sections/primitives.css';

import 'defuss-shadcn/dist/sections/actions.css';

import 'defuss-shadcn/dist/sections/data-display.css';

import 'defuss-shadcn/dist/sections/overlays.css';

import 'defuss-shadcn/dist/components/core.js';

import 'defuss-shadcn/dist/sections/primitives.js';

import 'defuss-shadcn/dist/sections/actions.js';

import 'defuss-shadcn/dist/sections/data-display.js';

import 'defuss-shadcn/dist/sections/overlays.js';

§Download a ZIP (vendoring)

For a project that cannot reach a CDN or a registry - an offline build, a locked-down network, a CMS theme folder - every GitHub release attaches one ZIP per section and one for all. The links in the table above point at the release of this page's version. Each ZIP is complete on its own: core, every section the chosen one needs, and the section, as readable files, minified files and source maps, with the license, the third-party notice and a README that shows the load order.

defuss-shadcn-vX.Y.Z-overlays/

├-- README.md               ← what is inside + the <link>/<script> tags in load order

├-- LICENSE

├-- NOTICE.txt              ← bundled third-party code (defuss-morph, defuss-query)

├-- components/

│   ├-- core.css            ← + core.min.css, core.min.css.map

│   └-- core.js             ← + core.js.map, core.min.js, core.min.js.map

└-- sections/

    ├-- primitives.css / .js ← the sections Overlays needs, each with its twins

    ├-- actions.css / .js

    ├-- data-display.css / .js

    └-- overlays.css / .js   ← the section itself

Unzip the folder into your static files and copy the tags from its README. The all.zip ZIP holds core.css and all.* - all.js embeds the runtime, so it has no core.js. Releases up to v0.9.5 predate the split and attach no ZIPs; for the whole repository (sources, docs and all), use the source archive GitHub attaches to every release, or the Self-hosting download.

§How the split is made

The sidebar is the source: scripts/lib/sections.ts reads it, assigns each component to the one section that links its page, and fails the build when a component is in no section or in two. scripts/bundle.ts builds the bundles, bun run verify checks that each carries exactly its members and no copy of the core runtime, and dist/stats.json records members, needs and sizes - this page renders from it. scripts/release-zips.ts packs the ZIPs from the same data when a release is cut.

Comments, ideas or improvements? Edit this page's source on GitHub