ChainRow
A component for displaying chain information in a row layout with icon and name.
ChainRow
The ChainRow component displays chain information in a horizontal layout, combining a chain icon with its name.
Usage
import { ChainRow } from '@avalabs/builderkit';
// Basic usage
<ChainRow
chain_id={43114}
name="Avalanche C-Chain"
/>
// With custom styling
<ChainRow
chain_id={43114}
name="Avalanche C-Chain"
className="bg-gray-100 p-2 rounded-lg"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
chain_id | number | - | Chain ID |
name | string | - | Chain name |
className | string | - | Additional CSS classes |
Features
- Combines ChainIcon with chain name
- Horizontal layout with proper spacing
- Flexible styling through className
- Simple and lightweight implementation
- Consistent alignment and spacing
Examples
Basic Chain Display
<ChainRow
chain_id={43114}
name="Avalanche C-Chain"
/>In a List
<div className="flex flex-col gap-2">
<ChainRow
chain_id={43114}
name="Avalanche C-Chain"
/>
<ChainRow
chain_id={43113}
name="Fuji Testnet"
/>
</div>Interactive Row
<ChainRow
chain_id={43114}
name="Avalanche C-Chain"
className="hover:bg-gray-100 cursor-pointer"
/>With Custom Styling
<ChainRow
chain_id={43114}
name="Avalanche C-Chain"
className="border border-gray-200 rounded-lg p-3 shadow-sm"
/>Layout Structure
The component uses a flex layout with:
- ChainIcon on the left
- Chain name on the right
- Gap between icon and name
- Center alignment of items
Last updated on 3/7/2025