Zum Hauptinhalt springen

4 Gründe, Chakra UI in deinem nächsten Projekt zu verwenden

Was ist Chakra UI?

Auf der Homepage von ChakraUI heißt es, es sei eine einfache, modulare und barrierefreie Komponentenbibliothek, mit der du React-Apps schnell entwickeln kannst. Nach einigen Projekten mit Chakra kann ich dem nur zustimmen. UIs zu bauen war noch nie so schnell und bequem.

Vielleicht kennst du bereits Bibliotheken wie MaterialUI, Ant Design oder React Bootstrap. Und vielleicht fragst du dich, warum du noch eine weitere UI-Bibliothek brauchst, wenn es schon so viele bewährte Optionen gibt. Nun, Chakra sticht vor allem durch starke Built-ins, Accessibility und hohe Anpassbarkeit hervor.

Die Vorteile von Chakra UI

Leicht anpassbar

Einer der größten Vorteile von ChakraUI ist, dass du es sehr einfach an deine Design-Anforderungen anpassen kannst. Üblicherweise startest du mit einem Custom Theme, in dem du Dinge wie Farben, Schriftgrößen, Breakpoints für Responsive Design, Schatten und vieles mehr definierst. Das bietet bereits viel Flexibilität für komplexe UIs – und es geht noch weiter.

Jede verwendete Komponente akzeptiert viele verschiedene Props, mit denen du sie stylen kannst. 

Schauen wir uns zum Beispiel eine einfache Verwendung der `<Button>`-Komponente in Chakra UI an:

 ```jsx <Button colorScheme="teal" variant="outline" size="lg" isLoading={loading} loadingText="Loading"> Click me </Button>

Mit diesem Codeschnipsel rendert Chakra einen Button mit den im Theme definierten Styles. 

Jetzt ändern wir mit ein paar Props den Stil: 

```jsx <Button colorScheme="red" variant="solid" size="md" isLoading={false}> Click me </Button>

In diesem Beispiel wechseln wir das Farbschema des Buttons auf eine rote Palette und stellen die Variante auf einen ausgefüllten Hintergrund um. Außerdem ändern wir die Größe auf „medium“ und setzen isLoading auf false.

Schauen wir weiter: Zuerst ändern wir das Farbschema des Buttons, sodass eine Teal-Farbpalette verwendet wird. Als Nächstes ändern wir die Variante, sodass statt eines ausgefüllten Hintergrunds nur eine Umrandung zu sehen ist. Dann vergrößern wir den gesamten Button. Neben Styles können wir auch das Verhalten anpassen: Wenn der Wert „isLoading“ true ist, blenden wir das Icon aus und zeigen einen Loader an, der ebenfalls einige Props akzeptiert. Sowohl Icon als auch Loader sind ebenfalls Teil von ChakraUI!

Wenn du schon einmal TailwindCSS verwendet hast, das zuletzt stark an Popularität gewonnen hat, oder Styled System, wirst du einige Ähnlichkeiten erkennen. Tailwind ist ein Set aus CSS-Klassen, mit denen du Komponenten zusammensetzen kannst. Styled System und Chakra liefern hingegen komplette Komponenten, deren einzelne Styles du per Props änderst. Alle diese Ansätze haben viele Fans – und auch Kritiker. Letztere führen als Nachteil an, dass der Code durch zu viele Klassen/Props an Lesbarkeit verlieren kann. Das kann natürlich passieren, daher ist es wichtig, unsere Komponenten schlank zu halten.

Dark-Mode-Unterstützung

Der Dark Mode ist aus unserem Tech-Alltag kaum noch wegzudenken – auf Smartphones, Laptops und natürlich Websites. Nicht jedes Projekt benötigt zwingend einen Dark Mode, aber es ist großartig, dass Chakra die Umsetzung vereinfacht. Standardmäßig sind die meisten Chakra-Komponenten Dark-Mode-kompatibel. Mit ein wenig Konfiguration bist du startklar! Außerdem kannst du den systemweiten Farbmodus nutzen: Wenn ein User auf seinem Gerät den Dark Mode als Standard festlegt, übernimmt deine Website das automatisch.

Einfache Umsetzung von Responsive Webdesign

ChakraUI unterstützt responsive Styles out of the box. Du musst keine Media Queries manuell hinzufügen, ChakraUI bietet Objekt- und Array-Werte, um responsive Styles festzulegen. Wichtig zu wissen: Es verwendet „@media(min-width)“ für einen Mobile-First-Ansatz.

Du kannst eigene Breakpoints im Theme konfigurieren oder die Standardwerte verwenden. 

So sieht eine einfache responsive Implementierung in einer `<Text>`-Komponente aus: 

```jsx <Text fontSize={["24px", null, "56px"]} textAlign={["center", null, "left"]}> Responsive Text </Text>

Mit dem obigen Snippet hat „<Text>“ „24px“ und ist auf allen Breakpoints zentriert. 

Statt eines einzelnen Werts übergeben wir ein Array. Chakra nimmt „24px“ aus dem „fontSize“-Prop und „center“ aus „textAlign“ und verwendet diese Werte für Bildschirmgrößen zwischen 0 und 30em (das sind die Standardwerte im Theme). Beachte das „null“: Im Bereich von 30em bis 48em (ebenfalls Standard-Breakpoints) wollen wir keine Styles ändern, also übergeben wir null, um unnötiges CSS zu vermeiden. Am Ende der Arrays weisen wir „56px“ und „left“ zu, sodass der Text ab 48em linksbündig und größer ist.

Ich persönlich bin kein großer Fan dieser Array-Notation. Es ist schwieriger zu erkennen, welche Styles auf welchen Breakpoint zutreffen. 

Zum Glück können wir die Objekt-Syntax verwenden: 

```jsx <Text fontSize={{ base: "24px", md: "56px" }} textAlign={{ base: "center", md: "left" }} > Responsive Text </Text>

Die Syntax sieht anders aus, das Verhalten bleibt gleich.

Barrierefrei

Die Bedeutung von Accessibility kann man nicht genug betonen. Ein beträchtlicher Teil der Menschen hat eine Form von Beeinträchtigung, daher ist es entscheidend, zugängliche UIs zu entwickeln. Wir müssen in der Regel einige WCAG-Richtlinien umsetzen, doch Dinge wie korrekte Fokusmarkierungen und Tastaturnavigation deckt Chakra bereits ab. Natürlich ist das nicht alles – wir müssen weiterhin auf eine saubere Überschriften-Hierarchie und Alt-Texte für Bilder achten.

BONUS: Kürzlich hat ChakraUI Support für RTL-Sprachen hinzugefügt. Damit ist es deutlich einfacher geworden, Komponenten zu erstellen, die sowohl RTL- als auch LTR-Sprachen abdecken.

Fazit

Wie du siehst, ist ChakraUI modular und barrierefrei. Außerdem ist es wirklich klein (375 kB minified, 101 kB minified und gzipped; beachte jedoch, dass du neben der Core-Chakra-Bibliothek auch Emotion installieren musst). Aus meiner Erfahrung ist es eine der besten Komponentenbibliotheken für React!

Wenn du mehr über Komponentenbibliotheken erfahren möchtest oder wissen willst, welche am besten zu deinem Projekt passt, freuen wir uns, von dir zu hören. Schreib uns an

 

Veröffentlicht am 19. Januar 2021

Teilen

Veröffentlicht am 19. Januar 2021


Mateusz WójcikMateusz WójcikJavaScript Developer

Digital Transformation Strategy for Siemens Finance

Cloud-based platform for Siemens Financial Services in Poland

See full Case Study
Ad image
4 Gründe, Chakra UI in deinem nächsten Projekt zu verwenden
Verpassen Sie nichts – abonnieren Sie unseren Newsletter
Ich stimme dem Empfang von Marketing-Kommunikation von Startup House zu. Klicken Sie für die Details

Das könnte Ihnen auch gefallen...

PDF aus HTML in einer React-/Node.js-App erstellen
ReactNode.js

PDF aus HTML in einer React-/Node.js-App erstellen

PDFs aus HTML zu erstellen kann eine Herausforderung sein, doch mit den richtigen Methoden erreichen Sie die gewünschten Ergebnisse. Entdecken Sie verschiedene Lösungen – von CSS-Druckstilen bis hin zu Bibliotheken wie html2canvas, jsPDF und Puppeteer. Verstehen Sie die Vor- und Nachteile der einzelnen Ansätze, um die beste Lösung für Ihr Projekt zu finden. Kontaktieren Sie uns unter hello@start-up.house für weitere Informationen und Unterstützung. Viel Erfolg bei der PDF-Erstellung!

Eugene Zolotarenko

Eugene Zolotarenko

20. Mai 2021・6 Min. Lesezeit

So haben wir SWR in einem Projekt eingesetzt – und warum wir es lieben
Next.jsReact

So haben wir SWR in einem Projekt eingesetzt – und warum wir es lieben

SWR, eine React-Hooks-Bibliothek für Remote Data Fetching, bietet eine einfache und dennoch leistungsstarke Lösung zum Caching, zur Revalidierung und zum Abrufen von Daten in React-Anwendungen. Erfahren Sie, wie SWR die Komplexität beim Umgang mit State Slices eliminiert, die Entwicklung beschleunigt und die UI-Performance verbessert. Entdecken Sie Beispiele für die SWR-Implementierung und seine Integrationen.

Kamil Polok

Kamil Polok

09. Juni 2021・6 Min. Lesezeit

Outsourced programming team working alongside an in-house product team on shared sprint goals
Software OutsourcingComputer programmingCooperation Models

Outsourcing von Softwareentwicklung

Outsourcing der Softwareentwicklung hat sich vom reinen Kostenhebel zu einer Möglichkeit entwickelt, genau dann spezialisiertes Fachwissen einzubringen, wenn es die Roadmap braucht. Dieser Leitfaden definiert, was Softwareentwicklungs-Outsourcing umfasst, warum sich Startups und Großunternehmen dafür entscheiden und wie sich die wichtigsten Kooperationsmodelle in der Praxis unterscheiden. Er liefert eine Methode zur Bewertung potenzieller Partner und führt durch den Delivery-Prozess – von der Discovery-Phase bis zum Launch. Abschnitte zu Platform Engineering, Risikominimierung, ROI und Zukunftstrends runden die Analyse ab.

Alexander Stasiak

Alexander Stasiak

10. Aug. 2026・8 Min. Lesezeit

A compact white sidewalk delivery robot navigating an urban street with pedestrians in the background, demonstrating autonomous food delivery in a real-world city environment
Food Delivery AppAutonomous RobotsFoodtech

Autonome Essenslieferung

Lieferroboter für den Gehweg haben den Sprung von experimentellen Pilotprojekten in den Logistikalltag geschafft. Starship Technologies allein hat inzwischen über 9 Millionen Zustellungen in mehr als 270 Städten und auf Campus-Standorten durchgeführt, die Kosten auf der letzten Meile sinken um 30–50 %, und die elektrischen Roboter verbrauchen pro Lieferung etwa so viel Energie wie das Aufkochen einer Tasse Tee. Dieser Leitfaden zeigt, wo die autonome Essenslieferung 2026 wirklich steht – wie die Roboter funktionieren, wer sie nutzt, welcher Software- und KI-Stack im Hintergrund läuft, welche Vorschriften den Rollout prägen und eine stufenweise Roadmap für Restaurants, Lebensmittelhändler und Lieferplattformen, die die Technologie in Pilotprojekten testen wollen.

Alexander Stasiak

Alexander Stasiak

27. Apr. 2026・5 Min. Lesezeit

FinTech engineers reviewing transaction processing architecture and financial compliance requirements
FinTechFinancial Software Compliance

Entwicklung maßgeschneiderter Versicherungssoftware

Die Versicherungsbranche funktioniert nach Regeln, die so spezifisch und so stark vom jeweiligen Rechtsraum abhängen, dass generische Plattformen sie kaum sauber abbilden können. Dieser Leitfaden zeigt, was die Entwicklung maßgeschneiderter Versicherungssoftware umfasst – von Policenverwaltung und Schadenprozessen über Rating Engines bis zu Kundenportalen. Er stellt den Tech-Stack vor, der die von der Branche geforderte Zuverlässigkeit liefert, verfolgt die Umsetzung von der Discovery bis zum Deployment und zeigt, wo KI das Underwriting verändert. Häufige Stolpersteine und die tatsächlichen Kosten des Nichtstuns werden offen benannt.

Alexander Stasiak

Alexander Stasiak

11. Aug. 2026・8 Min. Lesezeit

Reisebranche im Wandel: Fallstudien darüber, wie Mobile-Apps die Nutzerbindung erhöhen und den Umsatz steigern
Innovations in travel

Reisebranche im Wandel: Fallstudien darüber, wie Mobile-Apps die Nutzerbindung erhöhen und den Umsatz steigern

Mobile Apps revolutionieren die Reisebranche, steigern die Kundenbindung und kurbeln den Umsatz an. Dieser Artikel zeigt, wie Airbnb, Hilton und Expedia Mobile-Technologie erfolgreich nutzen, um das Kundenerlebnis zu verbessern und die Erlöse zu steigern. Lernen Sie aus ihren Strategien und Ergebnissen, um Ihr Reiseunternehmen zu optimieren.

Seweryn Olek

Seweryn Olek

11. Juni 2024・6 Min. Lesezeit

Kürzlich hinzugefügt

Glass paper airplane flying through a chrome ring, symbolizing a fast, automated leasing application
FinTechAutomationCase Study

Wie Startup House die Dauer von Leasinganträgen für Siemens Financial Services auf 2 Minuten verkürzte

Leasing stand früher für Papierkram, manuelle Bonitätsprüfungen und Entscheidungen, die nur zu Bürozeiten getroffen wurden. Bei Siemens Financial Services Poland hat Startup House das durch SimplyLease Online ersetzt: eine Anwendung, die Kunden in etwa 2 Minuten ausfüllen, und eine automatisierte Kreditentscheidung, die in rund 7 Minuten vorliegt – rund um die Uhr. Diese Fallstudie zeigt, wie die Plattform im Rahmen der Sicherheitsstandards der Siemens Group entwickelt wurde, wie sie sich mit Siemens-Systemen und externen Datenanbietern verbindet und welche Ergebnisse die seit 2016 bestehende Partnerschaft erzielt hat. Abschließend gibt es drei Erkenntnisse, die sich auf fast jedes Finanzierungs- oder Kreditprodukt anwenden lassen.

Alexander Stasiak

Alexander Stasiak

06. Okt. 2026・5 Min. Lesezeit

Glass shield of four stacked layers with a glowing green core, symbolizing an AI agent embedded in a cybersecurity platform
AI AgentsCybersecurityCase Study

Wie eine Cybersecurity-Plattform für Fortune-500-Kunden das Onboarding mit einem von Startup House entwickelten KI-Agenten um 95 % reduzierte

Eine Cyber-Risikoplattform, der Fortune-500-Unternehmen vertrauen, hatte ein bekanntes Problem: Kunden schätzten sie, nutzten sie jedoch nur einmal pro Quartal, und das Onboarding dauerte 45 Minuten mit geführter Einrichtung. Startup House entwickelte Aria, einen direkt im Produkt eingebetteten KI-Agenten mit einer vierstufigen Oberfläche, die Board-Mitglieder, CFOs und CISOs in einem einzigen Dashboard bedient. Die Onboarding-Zeit sank um 95 % auf unter zwei Minuten, die Datenexploration wurde vollständig im Self-Service möglich, und die Plattform wurde zum täglichen Werkzeug der Entscheidungsunterstützung. Diese Fallstudie erläutert die Oberfläche, die Architektur der Mandantenisolierung (Tenant Isolation) und warum das alles ohne Änderungen am Kerncode der Plattform möglich war.

Marek Pałys

Marek Pałys

05. Okt. 2026・5 Min. Lesezeit

Five glass measuring cylinders filled with violet and green liquid to different levels, symbolizing measurable project outcomes
Business OutcomesCase StudyAI Projects

AI- und Digitalprojekte von Startup House: 5 messbare Ergebnisse in Zahlen

Versprechungen sind in der Softwareentwicklung schnell gemacht – deshalb stützt sich dieser Artikel auf belastbare Zahlen. Er führt durch fünf konkrete Ergebnisse aus Kundenprojekten von Startup House: von einer Reduktion der Onboarding-Zeit um 95 % dank eines eingebetteten KI-Agenten bis zu einer Senkung der Entwicklungskosten um 40 % bei Omnipack. Jeder Abschnitt zeigt, welche Art von Arbeit die jeweilige Zahl möglich gemacht hat, und verlinkt auf die zugrunde liegende öffentliche Fallstudie. Zum Schluss nennen wir drei gemeinsame Muster dieser Projekte – wertvolle Ansätze, die sich lohnen, unabhängig davon, ob Sie mit uns zusammenarbeiten oder nicht.

Alexander Stasiak

Alexander Stasiak

04. Okt. 2026・5 Min. Lesezeit

Glass medical capsule inside a protective glass sphere with a chrome ring, symbolizing compliance-first healthcare software
HealthtechHIPAA ComplianceAI in healthcare

Healthtech-Softwareentwicklung bei Startup House: Compliance-orientierte Projekte und Ergebnisse

Bei Software im Gesundheitswesen ist Compliance entweder eine Architekturentscheidung – oder eine Nachrüstung. Dieser Artikel zeigt, wie man sie von Tag eins an einplant, anhand von drei Projekten von Startup House: einer Vertriebsplattform für Siemens Healthineers, im Einsatz in über 60 Ländern; einem Demenzpflege‑MVP, geprägt durch 7 Nutzertests mit Patient:innen und Angehörigen/Pflegekräften; und Doogie, ein HIPAA‑konformes KI‑Showcase, entwickelt in nur 2 Monaten. Außerdem erklären wir, wie RAG klinische KI‑Antworten bis zu verifizierten Quellen nachvollziehbar macht und warum Patientendaten niemals zum Training von Modellen verwendet werden. Für MedTech‑Unternehmen und Health‑SaaS‑Plattformen ist dies ein praxisnaher Blick darauf, was Compliance‑first‑Engineering jenseits des Labels wirklich bedeutet.

Marek Pałys

Marek Pałys

03. Okt. 2026・5 Min. Lesezeit

Two projects, one method: how phased delivery and real user testing took Graspify to live corporate training and gave LITTLEWINE an investor-ready scope.
Edtech transformationProduct discoveryAI In Education

EdTech-Entwicklung bei Startup House: Was wir entwickelt haben und was sich dadurch verändert hat

EdTech-Plattformen scheitern häufiger an UX als an Technik: Lernende springen ab, Content skaliert nicht, und der ROI bleibt unsichtbar. Dieser Artikel zeigt, wie Startup House dem mit phasenweiser Umsetzung und echtem User Testing begegnet – belegt durch zwei Projekte: Graspify entwickelte sich von einer kühnen Idee zu einer Microlearning-Plattform, die während einer Firmenveranstaltung Hunderte Mitarbeitende schulte, und LITTLEWINE erhielt dank 10 User-Interviews in 2 Wochen einen investorentauglichen Projektumfang. Außerdem geht es um AI-Lerntools, die ausschließlich auf freigegebenen Inhalten antworten und in nur 2 Wochen live gehen können.

Alexander Stasiak

Alexander Stasiak

02. Okt. 2026・5 Min. Lesezeit

Glass and chrome balance scale holding green glass coins and a chrome padlock, symbolizing speed and control in fintech AI
FinTechAI in FinanceRegulatory Compliance

KI im Fintech: Projekte, Erkenntnisse und Ergebnisse von Startup House

Fintech-Kundinnen und -Kunden erwarten die Geschwindigkeit moderner Consumer-Apps, während Aufsichtsbehörden Kontrolle auf Bankniveau verlangen. Dieser Artikel zeigt, wie Startup House diese Spannung in drei Projekten ausbalanciert hat: automatisierte 24/7-Kreditentscheidungen für Siemens Financial Services, eine Cyber-Risk-Plattform, die den Umsatz innerhalb eines Jahres um 150 % steigerte, und ein Climate-Fintech-Team für CHOOOSE, das wir in zwei Wochen zusammengestellt haben. Zu jedem Projekt teilen wir die wichtigste Lektion. Den Abschluss bilden fünf Regeln für KI im Finanzwesen – von der Stützung jeder Antwort auf verifizierte Daten bis zur von Anfang an eingeplanten Mandantentrennung in der Architektur.

Marek Pałys

Marek Pałys

01. Okt. 2026・5 Min. Lesezeit

Bereit, Ihr Know-how mit KI zu zentralisieren?

Beginnen Sie ein neues Kapitel im Wissensmanagement – wo der KI-Assistent zum zentralen Pfeiler Ihrer digitalen Support-Erfahrung wird.

Arbeiten Sie mit einem Team, dem erstklassige Unternehmen vertrauen.

Siemens logo
PwC logo
Toyota logo