DEV Community 👩‍💻👨‍💻

edwin_ew
edwin_ew

Posted on

002 NextUI Avatar

import { Grid, Avatar } from '@nextui-org/react';
export default function App() {
    return (
      <Grid.Container gap={2}>
        <Grid>
          <Avatar 
            squared 
            src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            text="Junior" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            text="Jane" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            text="Joe" />
        </Grid>
        <Grid>
        <Avatar text="JR" size="xs" />
      </Grid>
      <Grid>
        <Avatar
          src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
          size="sm"
        />
      </Grid>
      <Grid>
        <Avatar text="Joe" size="md" />
      </Grid>
      <Grid>
        <Avatar
          src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
          size="lg"
        />
      </Grid>
      <Grid>
        <Avatar text="John" size="xl" />
      </Grid>
      <Grid>
        <Avatar
          src="https://i.pravatar.cc/150?u=a04258114e29026702d"
          css={{ size: "$20" }}
        />
      </Grid>
      </Grid.Container>
    );
  }
Enter fullscreen mode Exit fullscreen mode

Image description

Oldest comments (0)

Create an Account! The only reason people scroll to the bottom...  
is because they want to read more.

Create an account to bookmark, comment, and react to articles that interest you.