Installation

Every package is published to npm and works in any Solid app — no build plugin required. Pick the layer you want, install it alongside solid-js, and import one stylesheet.

Pick a package

The five packages stack. Each one re-exports the layer beneath it, so install the highest one you need and nothing else — the lower layers come with it.

Install

solid-js is a peer dependency, so install it alongside:

npm install @proyecto-viviana/ui solid-js

Or, for the Spectrum layer on its own:

npm install @proyecto-viviana/solid-spectrum solid-js

Import the CSS

Components do not inject their own styles. Import the stylesheet once at your app entry, or your components render unstyled:

import "@proyecto-viviana/ui/components.css";

That one file is the usual import — it already contains the other three. Import them separately only if your app loads fonts itself:

Keep these at the very top of your CSS entry, or as JS imports before any other stylesheet. font-faces.css opens with a remote @import for the Geist family, and CSS drops an @import that any rule precedes — load it late and the Geist register silently falls back to the default sans-serif.

@proyecto-viviana/solid-spectrum ships the same subpaths, minus the Viviana tokens:

import "@proyecto-viviana/solid-spectrum/components.css";

Render inside a Provider

Provider establishes the color scheme, locale and text direction that components read. Deep imports are preferred in app code; the root barrel is convenient for examples and shared entry points.

import { Provider, Button } from "@proyecto-viviana/ui";
import { TextField } from "@proyecto-viviana/ui/TextField";

import "@proyecto-viviana/ui/components.css";

export function App() {
  return (
    <Provider colorScheme="dark">
      <TextField label="Name" />
      <Button variant="accent">Save</Button>
    </Provider>
  );
}

TypeScript

The packages ship their own declarations. Your tsconfig needs Solid’s JSX:

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"]
  }
}

Using Tailwind alongside

The library ships no Tailwind and needs none. The two coexist, but only if you declare the cascade layer order yourself, before any import:

@layer theme, base, _, L, components, utilities;

@import "tailwindcss";
@import "@proyecto-viviana/ui/components.css";

_ and L are the layers the generated component rules live in. Without that line, layer order falls to first appearance and both outcomes fail silently: declare nothing and our layers sort last, so a bg-red-500 on one of our components does nothing; put ours first and Tailwind’s Preflight outranks us, stripping components back to bare.

Writing your own style() calls

Optional, and not needed to use the components — their CSS is generated at package build time. You only need the macro plugin if your own code calls style():

import { style } from "@proyecto-viviana/ui/style" with { type: "macro" };

For Vite apps, use the packaged helper:

import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
import { vivianaMacros } from "@proyecto-viviana/ui/vite";

export default defineConfig({
  plugins: [vivianaMacros(), solid({ ssr: true })],
  optimizeDeps: {
    exclude: ["@proyecto-viviana/ui", "@proyecto-viviana/solid-spectrum"],
  },
  ssr: {
    noExternal: ["@proyecto-viviana/ui", "@proyecto-viviana/solid-spectrum"],
  },
});

vivianaMacros() builds on unplugin-parcel-macros, an optional peer — add it as a dev dependency when you use the helper:

npm install -D unplugin-parcel-macros