Site settings
Change the appearance of the site to suit your preferences
Setting Up Spor in Your Project
Spor makes building sophisticated React interfaces quick, easy, and (most importantly) fun. This guide will help you get started, whether you're using vanilla React, Next.js, or Remix.
Note: This guide assumes you're using TypeScript—if you're using plain JavaScript, just remove TypeScript-specific syntax and file extensions.
📦 Installation
First things first—let’s install Spor and its dependencies from npm:
# pnpmpnpm install @vygruppen/spor-react# npmnpm install @vygruppen/spor-react# yarnyarn add @vygruppen/spor-react
🔧 Setting Up SporProvider
Once installed, wrap your app in the SporProvider component. This ensures all Spor components work correctly.
🌱 "Vanilla" React Setup
Find your app's entry file (e.g., src/index.tsx if using Create React App). Wrap your app in SporProvider like this:
import { createRoot } from "react-dom";import { SporProvider } from "@vygruppen/spor-react";import App from "./App";const root = createRoot(document.getElementById("app"));root.render(<SporProvider><App /></SporProvider>);
⚡ Next.js Setup
Next.js is fantastic for server-side rendering (SSR) and static site generation. To use Spor, create (or update) pages/_app.tsx and wrap your app inside SporProvider:
import type { AppProps } from "next/app";import { SporProvider } from "@vygruppen/spor-react";import { system } from "./theme"function MyApp({ Component, pageProps }: AppProps) {return (<SporProvider><Component {...pageProps} /></SporProvider>);}export default MyApp;
🎭 Remix Setup
Remix is an exciting framework that renders React apps server-side using web standards. This very site is built with Remix!
However, CSS-in-JS libraries require a bit more setup in Remix. Follow thisEkstern lenke official guide but replace ChakraProvider with SporProvider. You can also check how we've set it up on this very website!Ekstern lenke
import {Links,Meta,Outlet,Scripts,} from "@remix-run/react";import { SporProvider } from "@vygruppen/spor-react";export default function App() {return (<html><head><linkrel="icon"href="data:image/x-icon;base64,AA"/><Meta /><Links /></head><body><SporProvider><Outlet /></SporProvider><Scripts /></body></html>);}
🧩 Type support
Installing @vygruppen/spor-react triggers a postinstall script that generates types for your project based on the default theme. However, when using pnpm as your package manager, you may encounter an issue where the package is retrieved from the pnpm cache without the generated types.
Add to your package.json
"scripts": {..."postinstall": "pnpm rebuild @vygruppen/spor-react"}
To ensure the typegen postinstall script is run on every install.
You might also get a warning after installing packages.
Ignored build scripts: @vygruppen/spor-react.Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.
You then have to give the @vygruppen/spor-react package permission to run the scripts with pnpm approve-build
🏢 Themes:
Avaliable themes:
- VyDigital (default)
- CargoNet
- VyUtvikling
Setting the correct theme ensures brand alignment and a consistent user experience.
By default sporprovider gives you VyDigital as theme. To use CargoNet or VyUtvikling, simply import it from spor and pass it to your SporProvider.
import { createRoot } from "react-dom";import { SporProvider, themes } from "@vygruppen/spor-react";import App from "./App";import { system } from "./theme"const root = createRoot(document.getElementById("app"));root.render(<SporProvider theme={themes.CargoNet}><App /></SporProvider>);
🎨 Extend the theme
If you want to further customize theme, you can create your custom theme like this, and pass it to your SporProvider.
import { themes, createSystem, defineConfig } from "@vygruppen/spor-react";const config = defineConfig({theme: {tokens: {colors: {custom: { value: "#ff0000" },},},},});export const system = createSystem(themes.VyDigital._config, config);
Types for custom theme
To enable full TypeScript support for your custom theme values, you’ll need to perform some additional configuration steps for your application.
- Configure Your Theme File:
Set up your theme as shown below in a file, such as src/theme.ts. - Install and Run the Chakra CLI:
Use the Chakra CLI to update your package's type definitions with the new theme values.
pnpm i --save-dev @chakra-ui/clichakra typegen src/theme.ts
To avoid running this every time you reinstall your node_modules, add a postinstall-script to your package.json
"scripts": {..."postinstall": "chakra typegen src/theme.ts"}
🌈 Customizing component styles
You can customize the appearance of any component by overriding its recipe (or slot recipe) directly in your theme configuration, which you must pass to the SporProvider as explained above.
Example: Customizing Buttons
Override colors and other properties in the specific variants you want to change:
// import { themes, createSystem, defineConfig, Flex, Button, SporProvider } from "@vygruppen/spor-react"; () => { const config = defineConfig({ theme: { recipes: { button: defineRecipe({ base: { textDecoration: 'underline', borderRadius: 'none', }, variants: { variant: { primary: { bg: 'blue', }, secondary: { bg: 'pink', }, }, }, }), }, }, }) const system = createSystem(themes.VyDigital._config, config) return ( <SporProvider theme={system}> <Flex gap="1"> <Button variant="primary">Primary button customized</Button> <Button variant="secondary">Secondary button customized</Button> </Flex> </SporProvider> ) }
Important notes
- Always override styles inside the specific variant(s) you want to affect (e.g.
variants.variant.primaryinstead of only in base). - If you add new variants or change variants, run the type-generation command afterwards to update your types
- The same approach works for slot recipes (multi-part components like Card, Dialog, Tabs, etc.).
- Look at the recipes' code in spor for details about what to overwrite. Check out docs for recipesEkstern lenke and slot recipesEkstern lenke in chakra ui for more information about styling.
🌍 Handling Languages
Some Spor components come with small built-in texts like "show," "hide," or "next." If your app supports multiple languages, you can pass the correct language to SporProvider using the language prop:
import { SporProvider, Language } from "@vygruppen/spor-react";<SporProvider language={Language.English}>...</SporProvider>
🗺️ Supported Languages:
- Norwegian (Bokmål) [default]
- Norwegian (Nynorsk)
- Swedish
- English
If no language is specified, Norwegian Bokmål is used by default.
🎉 Start Using Spor Components
Once you've completed the steps above, you're all set to start using Spor components in your app! 🚀
Check out the Components section for a full list of available UI elements and how to use them.