Hoppa till huvudinnehåll

Installera Midas

Midas kan installeras och användas i ett React-projekt med en pakethanterare som till exempel npm eller yarn. Alla komponenter är inkluderade i ett paket för att underlätta installation och uppdatering av komponentbiblioteket.

npm install @midas-ds/components

Snabbstart​

För en snabb och enkel start, importera default.css. Denna fil innehåller allt du behöver: typsnitt och CSS-variabler för att ge komponenterna rätt utseende. Importera filen i roten av din applikation:

main.tsx
import '@midas-ds/components/default.css'

Importera och använd en komponent​

Efter installationen kan du importera och använda komponenter direkt:

App.tsx
import { Button } from '@midas-ds/components'

export default function App({ children }) {
  return (
    <main>
      <Button variant='primary'>Klicka här</Button>
      {children}
    </main>
  )
}

export default App

För specifika instruktioner, se respektive komponent på våra komponentsidor eller utforska komponenterna mer i vår Storybook.

Avancerad installation​

För mer granulär kontroll kan du importera typsnitt och variabler separat från vårt temapaket. Detta är användbart om du vill undvika att blanda CSS-filer eller ha mer kontroll över hur typsnitt laddas.

1. Importera variabler och typsnitt​

Importera de delar du behöver i roten av din applikation:

main.tsx
// Importera enbart CSS-variabler
import '@midas-ds/theme/variables.css'

// Importera enbart typsnittet Inter
import '@midas-ds/theme/fonts.css'

// Importera color-scheme (eller ange själv color-scheme: light dark i css)
import '@midas-ds/theme/color-scheme.css'

Du kan använda andra metoder för att ladda typsnittet, så länge vikterna 400, 500 och 600 av "Inter" inkluderas.

2. Använd tokens i CSS​

Du kan nu använda Midas design tokens som CSS-variabler. Läs mer om våra tokens för att se alla tillgängliga alternativ.

index.css
.myClass {
  background-color: var(--midas-background-base);
}

Headless-bibliotek och andra beroenden​

Midas bygger på flertalet beroenden som kan vara bra att känna till. Förutom att vara ett komponentbibliotek baserat på React, så innehåller Midas även verktyg och bibliotek som underlättar utveckling och säkerställer tillgänglighet.

  • React Aria - Alla komponenter med några få undantag baseras på React Arias bibliotek för att säkerställa tillgänglighet och användarvänlighet. Använder du en komponent från Midas kan det även vara värt att läsa React Arias motsvarande dokumentation. Dessa finns länkade på komponentsidan.
  • Lucide Icons - Midas använder Lucide Icons för att tillhandahålla ikoner i komponenter.

Rapportera buggar eller förslag till nya features​

Hittat en bugg eller förbättringsmöjlighet? Det går utmärkt att skapa ärenden via github issues. Det går naturligtvis också bra att kontakta MIDAS-teamet via alla de normala kontaktvägarna. Alla synpunkter är välkomna!

Uppgradera från tidigare version​

Senaste ändringar och eventuella instruktioner för migrering hittas på release notes. Det finns också en mer detaljerad changelog för varje release.