# Installation
Solid Components is installed via npm. For environments without a bundler, see [CDN Hosting](?path=/docs/docs-general-cdn-hosting--docs).
The `components`, `styles`, and `tokens` packages now always share the same version. We use fixed versioning to keep
them fully in sync, so every release updates all three packages, even if only one of them changed. Make sure to
install or update them using the same version number.
## Prerequisites
### Theme
Solid Components come without any theme or font by default. Ensure to follow the installation guidelines from [@solid-design-system/tokens](?path=/docs/packages-tokens-installation--docs) to include a fitting theme in your project.
## Versioned vs. unversioned components
When using web components from Solid Design System in microfrontends, versioned components are always recommended. Including version numbers in component names provides more control over updates and prevents collisions when different versions of the same component are used simultaneously.
{/* prettier-ignore */}
Unversioned
{/* prettier-ignore */}
Versioned
```html
```
```html
```
Keep the following in mind for nested components:
- _Slotted components_, which are added by your app or website, are not automatically versioned. You need to version them yourself if necessary.
- _Nested components_, which are generated by the component itself, are automatically versioned (e.g., `sd-%DASHED-COMPONENTS-VERSION%-button` will generate an `sd-%DASHED-COMPONENTS-VERSION%-spinner` when in the loading state).
## Installation
Install Solid Components from npm:
```bash
npm install @solid-design-system/components @solid-design-system/tokens
```
It's up to you to make the source files available to your app. One way to do this is to create a route in your app called `/solid` that serves static files from `node_modules/@solid-design-system/components`.
Once you've done that, add the following tags to your page. Make sure to update `href` and `src` so they point to the route you created.
{/* prettier-ignore */}
Unversioned
{/* prettier-ignore */}
Versioned
```html
```
```html
```
Alternatively, [you can use a bundler](#bundling).
## Cherry Picking
Cherry picking loads only the components you need up front, limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component.
Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Solid is in.
{/* prettier-ignore */}
Unversioned
{/* prettier-ignore */}
Versioned
```html
```
```html
```
You can copy and paste the code to import a component from the "Importing" section of the component's documentation. Note that some components have dependencies that are automatically imported when you cherry pick. If a component has dependencies, they will be listed in the "Dependencies" section of its docs.
> Never cherry pick components or utilities from `solid-components.js` as this will cause the browser to load the entire library. Instead, cherry pick from specific modules as shown above.
> You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
## Bundling
Solid Components are distributed as a collection of standard ES modules that [all modern browsers can understand](https://caniuse.com/es6-module). However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. You can optimize your imports with a bundler.
To use Solid with a bundler, first install Solid along with your bundler of choice.
```bash
npm install @solid-design-system/components @solid-design-system/tokens
```
Now it's time to configure your bundler. Configurations vary for each tool, but here are some examples using Shoelace, that help you get started.
- [Example webpack config](https://github.com/shoelace-style/webpack-example/blob/master/webpack.config.js)
- [Example Rollup config](https://github.com/shoelace-style/rollup-example/blob/master/rollup.config.js)
Once your bundler is configured, you'll be able to import Solid components and utilities.
{/* prettier-ignore */}
Unversioned
{/* prettier-ignore */}
Versioned
```js
// , and are ready to use!
```
```js
// , and are ready to use!
```
> Component modules include side effects for registration purposes. Because of this, importing directly from `@solid-design-system/components` may result in a larger bundle size than necessary. For optimal tree shaking, always cherry pick, i.e. import components and utilities from their respective files, as shown above.
## cdn/ vs dist/
The package ships both `cdn/` and `dist/` artifacts. The `/cdn` files are pre-bundled with all dependencies inlined. The `/dist` files are not pre-bundled, allowing your bundler to deduplicate shared dependencies for a smaller total bundle.
Use `/dist` with a bundler (recommended). Use `/cdn` only when hosting on your own CDN without build tooling — see [CDN Hosting](?path=/docs/general-cdn-hosting--docs).