@gruand-co/core

v1.0.3

Published

2 months ago

A premium, highly polished, React-based UI component library built for luxury aesthetics and heritage-focused brand identities. It comes equipped with pre-configured themes, fine typography settings, and state-aware components designed with fluid micro-an

0High
0Medium
0Low

maelgruand

@gruand-co/core

Key Features

⚜ Luxury Theme System: Pre-loaded with two distinct atmospheric themes:
- Old Money Theme: Classic, editorial look (soft cream #FDFBF7 backdrops, deep slate accents, warm gold #D4AF37, and premium Cormorant Garamond serif headings).
- Black & White Theme: Modern, high-contrast luxury look (solid deep charcoal #141413, vibrant gold surfaces #d4a338, and modern serifs).
🖱 Micro-Animations & Transitions: Delicate, physics-informed motion mappings (hover lifts, expanding outline triggers, and glassmorphic blurs).
💻 TypeScript First: Full static typings, autocomplete support, and prop safety out-of-the-box.
📦 Zero-Friction Imports: Fully bundled ESM outputs generated with Vite library compiler.

Installation

Install the package into your React project:

npm install @gruand-co/core

Quick Start

1. Load the Heritage Fonts

We recommend loading the core typography families (Cormorant Garamond, Raleway, Cinzel, and Inter) via Google Fonts in your application's <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Cormorant+Garamond:ital,wght@0,300;0,600;0,700;1,400&family=Inter:wght@300;400;600&family=Raleway:wght@300;400;600&display=swap" rel="stylesheet">

2. Wrap your Application

Import the sovereign ThemeProvider at your application's root to distribute design tokens:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider, Heading, Card, Button, Text } from '@gruand-co/core';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ThemeProvider>
      <MainApp />
    </ThemeProvider>
  </React.StrictMode>
);

function MainApp() {
  return (
    <div style={{ padding: '60px', display: 'flex', justifyContent: 'center' }}>
      <Card hoverable style={{ maxWidth: '400px' }}>
        <Heading level={2} variant="gold">
          Private Vault Portal
        </Heading>
        
        <Text variant="lead" style={{ margin: '16px 0' }}>
          Welcome back. Your asset logs have been verified.
        </Text>
        
        <Button variant="primary">
          Enter Vault
        </Button>
      </Card>
    </div>
  );
}

Atmosphere Controls (Theme Shifting)

You can toggle the active theme programmatically using the useTheme hook:

import { useTheme, OldMoneyTheme, BlackWhiteTheme } from '@gruand-co/core';

function AtmosphereSwitcher() {
  const { theme, setTheme } = useTheme();

  const toggleAtmosphere = () => {
    const isOldMoney = theme.typography.fontFamilyHeading.includes('Cormorant');
    setTheme(isOldMoney ? BlackWhiteTheme : OldMoneyTheme);
  };

  return (
    <button onClick={toggleAtmosphere}>
      Switch Theme
    </button>
  );
}

Component Catalogue Reference

License

Distributed under the ISC License.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@gruand-co/core

Key Features

Installation

Quick Start

1. Load the Heritage Fonts

2. Wrap your Application

Atmosphere Controls (Theme Shifting)

Component Catalogue Reference

License