Skip to content
RepoWidget

Code Examples

Basic usage

Section titled “Basic usage”

The minimum required configuration: just a username and a container.

Basic usage 
createRepoWidget({
  username: 'peterbenoit',
  containerId: 'repo-container',
});

Custom layout

Section titled “Custom layout”

Show more repos in a wider grid on larger screens.

Custom layout 
createRepoWidget({
  username: 'peterbenoit',
  containerId: 'repo-container',
  columns: {
    mobile: 1,
    tablet: 3,
    desktop: 4,
  },
  maxRepos: 8,
});

Filtered and sorted

Section titled “Filtered and sorted”

Display only the six most recently updated repos, hiding a couple of internal projects.

Filtered and sorted 
createRepoWidget({
  username: 'peterbenoit',
  containerId: 'repo-container',
  sortBy: 'updated',
  maxRepos: 6,
  exclude: ['dotfiles', 'personal-notes'],
});

Light theme styling

Section titled “Light theme styling”

A clean, GitHub-like card style.

Light theme styling 
createRepoWidget({
  username: 'peterbenoit',
  containerId: 'repo-container',
  cardStyles: {
    backgroundColor: '#ffffff',
    borderRadius: '8px',
    boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
    border: '1px solid #e1e4e8',
  },
  textStyles: {
    titleColor: '#24292e',
    descriptionColor: '#586069',
    iconColor: '#6a737d',
    sizeColor: '#959da5',
  },
});

Dark theme styling

Section titled “Dark theme styling”

Card styles that complement a dark-background site.

Dark theme styling 
createRepoWidget({
  username: 'peterbenoit',
  containerId: 'repo-container',
  cardStyles: {
    backgroundColor: '#2d333b',
    borderRadius: '8px',
    boxShadow: '0 4px 6px rgba(0,0,0,0.3)',
    border: '1px solid #444c56',
  },
  textStyles: {
    titleColor: '#e6edf3',
    descriptionColor: '#adbac7',
    iconColor: '#768390',
    sizeColor: '#636e7b',
  },
});

Portfolio spotlight

Section titled “Portfolio spotlight”

Top five most-starred repos in a single centered column, with a pronounced hover lift.

Portfolio spotlight 
createRepoWidget({
  username: 'peterbenoit',
  containerId: 'repo-container',
  sortBy: 'stars',
  maxRepos: 5,
  scaleOnHover: 1.08,
  columns: { mobile: 1, tablet: 1, desktop: 1 },
  cardStyles: {
    backgroundColor: '#f6f8fa',
    borderRadius: '12px',
    boxShadow: '0 10px 24px rgba(0,0,0,0.06)',
    border: '1px solid #d0d7de',
    padding: '1.5rem',
  },
});

Organization page

Section titled “Organization page”

Display repositories from a GitHub organization instead of a personal account.

Organization page 
createRepoWidget({
  username: 'microsoft',
  containerId: 'repo-container',
  sortBy: 'stars',
  maxRepos: 9,
  columns: { mobile: 1, tablet: 2, desktop: 3 },
});

ES module import

Section titled “ES module import”

If you’re using a bundler (Webpack, Vite, Rollup), import the named export instead of using the global script.

import { createRepoWidget } from 'repo-widget';


createRepoWidget({
  username: 'peterbenoit',
  containerId: 'repo-container',
});