Hoppa till innehåll
UI-design för Sunlit Editorial System, en del av ZORC:s designkit för webbutveckling med fokus på högkontrast och användarvänlighet
Atlas – skärmbild 2
Atlas – skärmbild 3
// FÄRGPALETT
Atlas Blue Primary #0052CC
Soft Slate Background #F4F5F7
Deep Navy Text #172B4D
Vibrant Amber Accent #FFAB00
Pure White Surface #FFFFFF
Mint Success Success #36B37E
// Enterprise UI Kit

Atlas

Designsystem i Atlas-stil för AI-driven utveckling

25 kr

Engångsbetalning • Inkl. moms • Källkod ingår

Komponenter
10 st
Tech stack
React 18, Tailwind CSS, TypeScript, Framer Motion, Lucide Icons, Geist Sans
Licens
Kommersiell
Leverans
Direktåtkomst (zip + Git)
Uppdaterad

Om kit:et

Ett modernt UI Kit med Atlas-estetik. Innehåller färdiga komponenter för snabb prototypning och produktion.

Komponenter som ingår

Knappar Inmatningsfält Datatabeller Sidopaneler Modaler Kortkomponenter Navigeringsmenyer Statistikpaneler Toasts Varningsmeddelanden

Funktioner

  • Fullt stöd för mörkt och ljust läge
  • AI-vänlig komponentstruktur optimerad för LLMs
  • WCAG 2.1 AA-kontrastnivå för tillgänglighet
  • Responsiv layout för alla skärmstorlekar
  • Enkel anpassning via Tailwind-konfiguration
  • Blixtsnabb rendering och minimal bundle-storlek

När passar kit:et?

saas dashboard crm erp admin

Tech stack

React 18 Tailwind CSS TypeScript Framer Motion Lucide Icons Geist Sans

Så använder du kit:et

  1. Steg 01

    Ladda ner

    Logga in på ZORC och hämta zip-filen från dina köp. All källkod och dokumentation finns med.

  2. Steg 02

    Kopiera in i ditt projekt

    Lägg mappen components/ i ditt projekt — eller installera via package.json om kit:et är paketerat för NPM.

  3. Steg 03

    Koppla design tokens

    Mappen tokens/ har färger, typografi och spacing som du lägger till i din Tailwind-config eller som CSS-variabler.

  4. Steg 04

    Börja bygga

    Importera komponenterna och använd dem direkt. Varje komponent har exempel, props och varianter i dokumentationen.

Exempelprompt för AI

Bygg en omfattande instrumentpanel för en prenumerationstjänst med Atlas UI Kit. Implementera en datatabell för användarhantering med sök- och filtreringsfunktioner, en sidopanel för huvudnavigering och tre statistikpaneler överst som visar KPI:er. Se till att koden är modulär och använder Tailwind CSS-klasser konsekvent för att matcha Atlas professionella estetik.

Vanliga frågor

Vad innehåller Atlas?
Atlas innehåller 10 komponenter inklusive Knappar, Inmatningsfält, Datatabeller, Sidopaneler och mer.
Vilken teknik bygger kit:et på?
Atlas är byggt med React 18, Tailwind CSS, TypeScript, Framer Motion, Lucide Icons, Geist Sans.
Är komponenterna tillgängliga?
Ja. De följer WCAG 2.1 AA där innehållet tillåter — fokusring, tangentbord, ARIA och kontraster.
Vilken licens får jag?
Kommersiell. Du får använda komponenterna i din organisations betalda projekt. Det enda du inte får är att sälja vidare själva kit:et.
Hur kommer jag igång?
Kopiera in mappen components/, lägg till design tokens och börja bygga. En komplett guide följer med.
Får jag uppdateringar?
Ja. Alla framtida versioner är inkluderade utan extra kostnad så länge kit:et finns kvar i sortimentet.
// Andra UI kits

Fler kits från ZORC