@sb1/indeks-react
v0.2.21
Published
React components for Indeks design system
Downloads
348
Readme
@sb1/indeks-react
React-komponenter for Indeks designsystemet. Denne pakken inneholder ferdigbygde React-komponenter med tilhørende TypeScript-typer.
📦 Del av Indeks
Denne pakken er en del av Indeks designsystemet og må brukes sammen med CSS-styling:
- CDN (anbefalt) - Last inn CSS fra
cdn.sparebank1.no/indeks/css/<versjon>.css - eller importer via @sb1/indeks-css og installer via npm
📥 Installasjon
npm install @sb1/indeks-react🎨 Styling
Komponentene krever at du inkluderer Indeks CSS.
Metode 1: Via CDN (anbefalt)
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.sparebank1.no/indeks/css/<versjon>.css" />
</head>
<body>
<div id="root"></div>
</body>
</html>Metode 2: Via npm
npm install @sb1/indeks-css// main.tsx eller App.tsx
import '@sb1/indeks-css';✨ Bruk
import { Button, Card, Heading, Text, HStack, VStack } from '@sb1/indeks-react';
function App() {
return (
<VStack gap="4">
<Card>
<Heading as="h1">Velkommen til Indeks</Heading>
<Text>Dette er en eksempelapp med Indeks-komponenter.</Text>
<HStack gap="2">
<Button variant="primary">Primær knapp</Button>
<Button variant="secondary">Sekundær knapp</Button>
</HStack>
</Card>
</VStack>
);
}🔧 TypeScript
Pakken inkluderer TypeScript-definisjoner for alle komponenter:
import { ButtonProps, CardProps } from '@sb1/indeks-react';
const MyButton: React.FC<ButtonProps> = (props) => {
return <Button {...props} />;
};🔗 Relaterte pakker
- @sb1/indeks-css - CSS-styling (via CDN eller npm)
- @sb1/indeks-tokens - Design tokens (trenger ikke egen import)
- @sb1/indeks-utils - Utility-klasser (trenger ikke egen import)
📚 Dokumentasjon
Full dokumentasjon finnes på:
🧩 Opprette nye komponenter
Nye komponenter genereres med Plop:
npm run create-componentDette oppretter komponent, story og test i riktig mappestruktur under lib/components/.
🎯 Peer Dependencies
Denne pakken krever:
react^18.0.0 || ^19.0.0react-dom^18.0.0 || ^19.0.0
📄 Lisens
MIT