Hoppa till innehåll
Gränssnittet för Pearl Interface Suite visar designverktyg med glassmorphism, stats för trafik och konvertering samt interaktionsdesign
Glass Pearl – skärmbild 2
Glass Pearl – skärmbild 3
// FÄRGPALETT
Pearl White Background #F8FAFC
Glass Primary Primary #6366F1
Soft Lavender Secondary #A855F7
Aqua Glint Accent #06B6D4
Deep Slate Text #0F172A
// Glassmorphism UI Kit

Glass Pearl

Designsystem i Glass Pearl-stil för AI-driven utveckling

25 kr

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

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

Om kit:et

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

Komponenter som ingår

Semitransparenta knappar Frostat glas-kort Modala dialoger Navigationspaneler Datatabeller med suddig bakgrund Statistik-widgets Formulärfält med glas-effekt Responsiva menyer Systemmeddelanden Fliksystem

Funktioner

  • Optimerad för AI-verktyg som Cursor och Base44
  • Responsiv design från mobil till desktop
  • Vackra bakgrundssuddighetseffekter (backdrop-blur)
  • Fullt stöd för mörkt och ljust läge
  • WCAG-kompatibla kontrastnivåer
  • Modulär arkitektur för enkel skalning

När passar kit:et?

saas dashboard internal-tool landing-page

Tech stack

Tailwind CSS React Framer Motion Lucide Icons TypeScript Inter Font

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 modern instrumentpanel för analys i Glass Pearl-stil. Använd ett centralt nätverk av frostat glas-kort med kraftig bakgrundsskärpa och mjuka inre skuggor för att skapa djup. Implementera en sidomeny med semitransparenta knappar och se till att alla element använder de definierade Tailwind-variablerna för att bibehålla en enhetlig estetik.

Vanliga frågor

Vad innehåller Glass Pearl?
Glass Pearl innehåller 10 komponenter inklusive Semitransparenta knappar, Frostat glas-kort, Modala dialoger, Navigationspaneler och mer.
Vilken teknik bygger kit:et på?
Glass Pearl är byggt med Tailwind CSS, React, Framer Motion, Lucide Icons, TypeScript, Inter Font.
Ä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