Installation | Camome UI

Install

npm install @camome/system @camome/core
npm install --save-dev @camome/utils

Setup bundler

The distributed code for Camome is written in JavaScript + CSS Modules in Sass. 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:

CSS imports

The order of CSS import statements matter. Camome declares the priority of CSS Cascade Layers in the theme file, so please make sure to import it first.

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

_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;

globals.css

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

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.

index.html

<!DOCTYPE html>
<html data-theme="<light or dark>">
  <!-- Content -->
</html>

Theme will not be applied if the data-theme attribute is absent. This is mandatory.

Theming

Importing components

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

individual-import.tsx

import { Button } from "@camome/core/Button";
import { Input } from "@camome/core/Input";

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 enables auto-completion of CSS variables.

.vscode/settings.json

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

Make sure to change the file path if you use a custom theme.