# UI Components

The `@arcblock/did-connect-react` library includes a set of pre-styled, supplementary UI components designed to help you display DID-related information consistently and beautifully. These components work seamlessly with the core connection flow and are built upon the robust `@arcblock/ux` and `@mui/material` libraries, ensuring a cohesive look and feel in your application.

This section provides an overview of these components. Click on any card to view detailed documentation, including properties and usage examples.

<x-cards data-columns="2">
  <x-card data-title="Avatar" data-href="/ui-components/avatar" data-icon="lucide:user-circle-2">
    A component designed to display a user's avatar, which is automatically derived from their DID.
  </x-card>
  <x-card data-title="Address" data-href="/ui-components/address" data-icon="lucide:key-round">
    Used for displaying a user's DID address in a formatted and optionally shortened manner for better readability.
  </x-card>
  <x-card data-title="Button" data-href="/ui-components/button" data-icon="lucide:mouse-pointer-click">
    A pre-styled button, specifically the `ConnectButton`, for initiating the DID Connect flow with a consistent design.
  </x-card>
  <x-card data-title="Logo" data-href="/ui-components/logo" data-icon="lucide:hexagon">
    A simple component to display the official DID Connect logo, useful for branding and UI consistency.
  </x-card>
</x-cards>

## Combined Usage Example

These components are designed to be composed together to build user interfaces. Here is an example of how you might use `Avatar`, `Address`, and `ConnectButton` to create a simple user profile display.

```javascript Combined UI Example icon=logos:react
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
import Address from '@arcblock/did-connect-react/lib/Address';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';
import { Box, Typography, Paper } from '@mui/material';

function UserDisplay({ userDid, userName }) {
  if (!userDid) {
    return <ConnectButton />;
  }

  return (
    <Paper elevation={2} sx={{ padding: '16px', display: 'flex', alignItems: 'center', gap: '16px' }}>
      <Avatar size={60} did={userDid} />
      <Box>
        <Typography variant="h6" component="div">{userName || 'Anonymous'}</Typography>
        <Address variant="body2" color="text.secondary">{userDid}</Address>
      </Box>
    </Paper>
  );
}

// Example usage:
// <UserDisplay userDid="z123..." userName="Alice" />
// <UserDisplay userDid={null} />
```

This example demonstrates how easily you can construct a common UI pattern for logged-in and logged-out states using the provided components.

### Next Steps

After familiarizing yourself with the UI components, you may want to explore the library's [Hooks](./hooks.md) for more programmatic control over the authentication flow and session data.