@100mslive/roomkit-react/src/VideoTile/VideoTile.mdx


## VideoTile

import { Story } from '@storybook/addon-docs';

Building a `<VideoTile />` component is all about composing styled/unstyled component provided by `../`. We will create a basic videotile by composing `StyledVideoTile`.

```jsx
import { StyledVideoTile, Video } from '../';

const VideoTileStory = () => {
  return (
    // width,height of the tile
    <StyledVideoTile.Root css={{ width: 500, height: 300 }}>
      <StyledVideoTile.Container>
        {/* trackId of the peer */}
        <Video trackId="1" />
        {/* Meta info */}
        <StyledVideoTile.Info>Deepankar</StyledVideoTile.Info>
        <StyledVideoTile.AudioIndicator>
          <MicOffIcon />
        </StyledVideoTile.AudioIndicator>
      </StyledVideoTile.Container>
    </StyledVideoTile.Root>
  );
};
```

<Story id="video-videotile--example" />