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

Importera och använd komponent​

Generellt, importera och använd direkt:

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.

Installera Inter som typsnitt​

Detta är ett rekommenderat sätt att installera vårt typsnitt Inter.

App.tsx (rootfilen i din app)
import '@midas-ds/components/global.css'
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

Det går självklart att använda andra metoder så länge vikterna 400, 500 och 600 inkluderas samt att det importerade typsnittet heter just "Inter" för att komponenterna ska ta användning av det.

Mer info finns på GitHub samt under guider

Dependencies​

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.