Quick Start

Get started quickly with reusable UX components for visualizing and interacting with verifiable credentials.

Install

pnpm install @learncard/react

Usage

import React, { useState, useEffect } from "react";
import '@learncard/react/dist/base.css'; // if not already using tailwind
import '@learncard/react/dist/main.css';
import { initLearnCard } from "@learncard/init";
import { VCCard } from "@learncard/react";
import type { VC } from "@learncard/types";

const Test = () => {
    const [vc, setVc] = useState<VC | null>(null);
    
    useEffect(() => {
        const getVc = async () => {
            const learnCard = await initLearnCard({ seed: 'a' }); // Bad practice! You should be generating keys...
            const uvc = learnCard.invoke.newCredential();
            setVc(await learnCard.invoke.issueCredential(uvc));
        };
        
        getVc();
    }, []);
    
    if (!vc) return <>Generating Credential...</>; // Loading placeholder while credential is generated
    
    return <VCCard credential={vc} />; // Show card for the generated credential with validation results
};

Styles

@learncard/react uses tailwind for styles, and exports two css files for consumers: base.css and main.css. If you are already using Tailwind, you do not need to import base.css, as it is simply re-exposing @tailwind base and @tailwindcss/components. However, you will need to import main.css, because it imports the tailwind classes used by our components, as well as our bespoke CSS classes.

If using Tailwind already

import '@learncard/react/dist/main.css';

If not using Tailwind already

import '@learncard/react/dist/base.css';
import '@learncard/react/dist/main.css';