Components

The Glyph Widget library provides several components for integrating with Glyph's user management system. All components must be used within a GlyphProvider context.

Provider Setup

Before using any components, wrap your application with the necessary provider. You can use either the standalone setup or the Privy integration.

Available Components

import {
	GlyphProvider,
	GlyphPrivyProvider,
	GlyphWidget,
	LoginButton,
	SignUpButton,
	LogoutButton,
} from "@use-glyph/sdk-react";

Provider Components

• GlyphProvider - Standalone context provider for Glyph components
• GlyphPrivyProvider - All-in-one provider with Privy integration
• GlyphWalletProvider - Standalone wagmi provider for Glyph wallet components

Core Components

• GlyphWidget - Main widget component with wallet interface

Authentication Components

• LoginButton - Pre-styled button for initiating login
• SignUpButton - Pre-styled button for new user registration
• LogoutButton - Pre-styled button for logging out
• NativeGlyphConnectButton - Pre-styled button for initiating connection with Glyph (Only for Native Integration)

Styling

INFO

To use the styled components, you need to import the styles.

main.tsx

import "@use-glyph/sdk-react/style.css";

style.css

@import "@use-glyph/sdk-react/style.css";

All components use CSS variables for theming and Tailwind CSS classes prefixed with gw- to avoid conflicts with your application's styles. You can override these styles by:

1. Overriding CSS variables for theme customization
2. Targeting the specific gw- prefixed classes
3. Using the provided theme props on components

Next Steps

• Explore each component's documentation for detailed usage information, props, and examples.