---
title: "Installation"
id: "guide:installation"
---

## Install

<CodeTabs
  items={[
    {
      name: "npm",
      code:
        pm.install("npm", "@camome/system @camome/core") +
        "\n" +
        pm.installDev("npm", "@camome/utils"),
      language: "bash",
    },
    {
      name: "yarn",
      code:
        pm.install("yarn", "@camome/system @camome/core") +
        "\n" +
        pm.installDev("yarn", "@camome/utils"),
      language: "bash",
    },
    {
      name: "pnpm",
      code:
        pm.install("pnpm", "@camome/system @camome/core") +
        "\n" +
        pm.installDev("pnpm", "@camome/utils"),
      language: "bash",
    },
  ]}
/>

### Setup bundler

The distributed code for Camome is written in JavaScript + [CSS Modules](https://github.com/css-modules/css-modules) in [Sass](https://sass-lang.com/). As these cannot be directly imported from JavaScript, you will need to set up plugins or loaders for Webpack or Rollup.

Please refer to the following docs for how to set up with your framework:

<DocLinkCardGrid
  links={[
    { id: "integrations:next" },
    { id: "integrations:astro" },
    { id: "integrations:vite" },
    { id: "integrations:cdn" },
  ]}
/>

### CSS imports

The order of CSS import statements matter. Camome declares the priority of [CSS Cascade Layers](https://developer.mozilla.org/ja/docs/Web/CSS/@layer) in the theme file, so please make sure to import it first.

For example, in Next.js it would look like this:

```tsx:_app.tsx
import "@camome/system/theme.css";
// or: import "@/styles/generated-theme.css"
import "@/styles/globals.css";
import { Button } from "@camome/core/Button";
// or: import { Button } from "@camome/core"

function App() {
  return <Button>Button</Button>;
}

export default App;
```

```css:globals.css
/* Override styles of Button
   (Outside of @layer always wins over inside) */
.Button {
  border-radius: 999px;
}
```

<DocLinkCardGrid links={[{ id: "guide:theming" }]} />

### Specifying a theme with the `data-theme` attribute

Camome supports `light` and `dark` themes, which can be specified with the `data-theme` attribute on the `<html>` tag.

```html:index.html
<!DOCTYPE html>
<html data-theme="<light or dark>">
  <!-- Content -->
</html>
```

<Message status="warn">
  Theme will not be applied if the `data-theme` attribute is absent. This is
  mandatory.
</Message>

<DocLinkCardGrid links={[{ id: "guide:theming" }]} />

### Importing components

There are two ways to import components from `@camome/core`:

```tsx:individual-import.tsx
import { Button } from "@camome/core/Button";
import { Input } from "@camome/core/Input";
```

```tsx:bulk-import.tsx
import { Button, Input } from "@camome/core";
```

**Generally, individual import is preferred**, but bulk import is also fine.

- When using bulk import, performance of the development server and build may slightly decrease (at least with Next.js and Vite). However, it should not affect the production environment (as they should be tree-shaken).
- Individual import may result in poorer auto-completion by IDEs.
- Individual import may result in more verbose code.

## VSCode extension

[CSS Variable Autocomplete](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables) enables auto-completion of CSS variables.

```json:.vscode/settings.json
{
  "cssVariables.lookupFiles": ["node_modules/@camome/system/dist/theme.css"]
}
```

<Message status="warn">
  Make sure to change the file path if you use a custom theme.
</Message>
