DEV Community

Cover image for The UI Components of GitHub's UI
Jeff Omenyuru
Jeff Omenyuru

Posted on

The UI Components of GitHub's UI

Several features and tools make up the components of GitHub's UI. These features and tools enable management and collaboration among users. To get a description of some of these tools and features, read on for a breezy tour around the platform. Use the table of content below to navigate to different sections.

Table of content
User feed
User profile
Notifications
Profile settings
Repository components

User feed

GitHub feed

  1. Recent repositories: This is where the most recent repositories you interacted with appear. Any repository you don’t interact with after four months will automatically drop out of Recent Repositories. The search bar helps find such a repository. You can also use the green button above the search bar to add a new repository.

  2. Following feed: The public activities of those you follow and repositories you watch appear under Following. For example, when anyone stars a repository you watch or someone you follow forks a public repository, follows another user, or starts sponsoring someone, GitHub will notify you on your personal dashboard under Following. The Following feed is how you stay up-to-date on your community's activities on the platform. However, you can unfollow anyone whose public activities you no longer wish to see.

  3. For you feed: The For you feed is where GitHub makes recommendations based on your interests and public activities, including repositories you star, repositories you’ve contributed to, users and organizations you follow and have collaborated with. These recommendations help you discover interesting projects across the platform.

  4. Explore repositories: The Explore repositories section offers personalized recommendations for interesting projects based on activities such as contributions and starred repositories.

User profile

User profile screenshot

Edit profile: Allows you to edit your name, bio, company, location, email, website, and social media handle.

Pull requests: Displays the pull requests you created.

Issues: Displays all your open issues.

Marketplace: Enables you to discover and add free and paid functional tools that improve your workflow.

Explore: Shows trending repositories and recommends projects and good first issues based on past contributions and people you follow.

Overview: Displays the content of your profile README and an activity section that shows your profile visitors, most active repositories, type of contributions, and number of contributions.

Repositories: Access all your repositories, both private and public, sorted by name, star, or last update. There’s a button for adding a new repository and a search bar that enables you to search for a specific repository that isn’t immediately visible in the lineup.

Projects: Still in the beta stage, individual users and organizations use Projects to manage their workflow in an Excel-like spreadsheet. The spreadsheet is versatile enough to allow planning, prioritization, sorting, filtering, tracking, and so on. You can view your projects either as a high-density table or as a board.

Packages: Fully integrated with GitHub, Packages lets you host all your code and software packages in one place, either privately or publicly, helping you centralize and manage software development with greater ease. GitHub Packages is compatible with popular package management tools like Docker, Apache Maven, NuGet, RubyGems, npm, and Containers.

Stars: Every repository you star on GitHub appears on the Stars page. You can curate and organize starred repositories with lists, making it easier to locate and return to those repositories later.

Create: Creates new repositories, gists, organizations, and projects. Also imports repositories.

Notifications: See Notifications section.

Your profile: Takes you to your profile.

Your repositories: Takes you to a list of all your public and private repositories.

Your codespaces: All your codespaces appear here.

Your projects: Displays your existing projects, with the option to create new projects using the New project button.

Your stars: Displays starred repositories.

Your gists: Shows all the private and public gists you created.

Upgrade: Upgrades your account to the pro version.

Feature preview: Provides a list of features that are available in beta.

Help: Accesses GitHub documentation for any information you may need.

Settings: See the Profile settings section.

Sign out: Signs your account out.

Notifications

GitHub notifications screenshot

Inbox: Displays notifications you haven’t marked as done or unsubscribed to.

Saved: Notifications you saved to read later appear in Saved.

Done: Notifications you’ve marked as done appears in Done.

Filters: The settings icon next to Filters enables you to filter your inbox by Assigned, Participating, Mentioned, Team mentioned, and Review requested.

Manage notifications: Has a drop-down that provides three notification management options: Notification settings, Watched repositories, and Subscriptions.

  • Notifications settings: Chooses how you receive organization and Dependabot alerts, including notifications for conversations, actions, and watching.
  • Watched repositories: Displays the repositories you’ve watched
  • Subscriptions: Displays the repositories you’re subscribed to.

Profile settings

GitHub profile settings screenshot

Public profile: Allows you to change your name, select a verified email to display publicly, mention your company’s GitHub organization, and include a short bio, website URL, and location. You can also update preferences to make your profile private, show your achievements, and include private contributions on your profile.

Account: Changes your username, exports your account data, adds a successor, or deletes your account.

Appearance: Enables you to choose how GitHub will look to you. You can apply day or night theme and choose a preferred emoji skin tone, tab size, and font for your Markdown editor.

Accessibility: Enables you to activate or deactivate character keys. You can also choose whether animations should play automatically and modify shortcuts to trigger the Command Palette for the default search mode and command mode.

Notifications: Allows you to choose how you want to receive notifications for push access, mentions, Dependabots, actions, organization alerts, repositories, and conversations you’re watching. Beyond these, you can also choose specific activities to receive email notifications for.

Billing and plans: Displays your personal billing, including your current monthly bill and next payment due. You can create an organization account, update your current plan and payment method, manage your spending limit, and redeem coupons. Additional things you can do in Billings and plans include getting usage reports, sponsoring users of your choice, view minutes quota, data transfer quota, bandwidth quota, and shared storage between Actions and Packages.

Emails: Adds email addresses, both primary and backup email addresses. Also, here you can make your email private and choose the emails you receive.

Password and authentication: Enables two-factor authentication. Also allows you to update your password, view and revoke sessions you don’t recognize.

SSH and GPG keys: Adds new SSH and GPG keys. Activates vigilant mode, allowing you to flag unsigned commits as unverified.

Organizations: Gives you the option to either create a new account or transform your existing account into an organization account.

Moderation: Has a drop-down that reveals three moderation options: Blocked users, Interaction limits, and Code review limits.

  • Block users: Allows you to search and block users. You can also see all the users you’ve blocked and choose to get a warning when a blocked user is a previous contributor to your repository.

  • Interaction limits: Sets a temporary interaction limit for existing users, prior contributors, and repository contributors.

  • Code review limits: Limit reviews on all repositories and remove review limits from all repositories.

Repositories: Updates repository default branch and displays existing and deleted repositories.

Packages: Searches deleted packages and displays recoverable deleted packages.

Pages: Adds and verifies domains, allowing you to restrict who can publish GitHub Pages on them.

Saved replies: Saves snippets of texts you can reuse in comment fields throughout GitHub.

Code security and analysis: Disables or enables dependency graph, Dependabot alerts, and Dependabots security updates.

Applications: Displays and configures installed GitHub apps. You can also view authorized GitHub and OAuth apps and revoke authorization.

Scheduled reminders: Shows scheduled reminders.

Security log: Displays and exports security logs.

Sponsorship log: Displays sponsorship log, including new sponsorships, changes, and cancellations. You can also filter the log by period.

Developer settings: Registers new GitHub and OAuth apps and generates new personal access tokens for quick access to the GitHub API.

Repository components

Repo components screenshot

Pin: Pins a repository to your profile.

Unwatch: Sets up notifications for repositories. You can choose to be notified about all activities or never be notified. Also, you can turn on notifications for specific events like mentions.

Fork: Forks repositories to enable you freely work on projects without altering the original repository.

Star: Stars a repository.

Code: Displays the complete content of a repository.

Issues: Enables the detailed description of issues discovered in a project. The Write section in Issues provides ample space with Markdown support to help you format your description properly. You can also attach files, write code inline, use labels, link to lines of code, refer to other issues, and mention people from whom you might be looking to get feedback.

Actions: GitHub Actions is a free continuous integration and continuous delivery (CI/CD) platform fully integrated into GitHub. It enables you to automate your software development lifecycle, from building and testing to deployment. You can also create workflows directly in your repository, with specific events as triggers, such as someone creating an issue or opening a pull request.

Projects: Enables you to organize your issues and pull requests in a spreadsheet so that you can visualize, keep track, and prioritize tasks better.

Wiki: Every repository on GitHub is equipped with Wiki, designed to host documentation that can help others better understand and contribute to your projects. With Wiki, you can easily describe your project in granular detail in long-form content that’s easy to navigate.

Security: Includes a security policy in your repository, views security advisories, enables Dependabots alerts, and sets up code scanning.

  • Security policy: Your security policy informs users on how to report vulnerabilities and how you’ll fix them. This is outlined in a security.md file included in the root of your repository.
  • Security advisories: Allows you to discuss and fix vulnerabilities privately. After that, you can then publish a security advisory informing users of your project so that they can upgrade package dependencies.
  • Dependabots alerts: Enabling Dependabots alerts prompts GitHub to send alerts about vulnerable dependencies in public repositories.
  • Code scanning: Code scanning enables you to scan your GitHub repository for security vulnerabilities and coding errors.

Insights: Provides an overview of the activities of your repository. You get specific insights by clicking the following tabs:

  • Pulse: Provides data on active pull requests, active issues, merged pull requests, open pull requests, closed issues, and new issues.

  • Contributors: Enables you to view the top 100 contributors to your repository, presented as a contributor’s graph.

  • Community: Shows the community profile of a repository to help you decide whether to contribute or not.

  • Community standards: Accesses a checklist that allows you to add a description, README, code of conduct, contributing guidelines, license, issue and pull request template.

  • Traffic: Presented in form of graphs and tables, this is where you’ll find information on the traffic your repository accumulates. Traffic information includes popular content, visits, the number of times users cloned the repository per day, and referring sites.

  • Commits: Displays all the commits made to your repository in the past year through a top and bottom graph.
    Code frequency: Shows weekly content additions and deletions in a graph.

  • Dependency graph: Provides a summary of the dependencies, packages and ecosystem a repository depends on. It also shows the packages, dependents, and repositories that depend on a repository.

  • Network: Gives a visual of the branch history of the whole repository network.

  • Forks: Shows a repository's forks, listed alphabetically by user names. Clicking on a user name redirects you to the user’s profile, while the fork name redirects you to the specific fork of the repository.

Settings: This is where you customize your repository:

Repo settings screenshot

  • Rename: Renames your repository.

  • Collaborators: Allows you to add people you want to collaborate with and manage access. Under Who has access, the Manage button redirects you to the Danger Zone section, where you can change repository visibility, archive repository, delete repository, or transfer ownership.

  • Moderation options: Moderation options include interaction limits and code review limits. With interaction limits, you can restrict users’ interaction with your repository for a specified period. Restrictions include comments, pull requests, and issues. While Code review limits restricts the access of users you granted permission to approve or request changes on pull requests.

  • Branches: Renames default branch and includes rules to check status before merging and to prevent branch deletion and force pushing.

  • Tags: Marks specific commits at a particular point in the history of a repository. In tag settings, you can add tag protection rules to prevent your repository users from creating or deleting tags.

  • Actions: Has a dropdown with two options: general and runners. General is where you grant action and workflow permissions, choose artifact and log retention duration, and determine which collaborators will require approval to run workflows. While runners enables you to add a self-hosted runner to a repository.

  • Webhooks: Adds webhooks to help you build and set up integrations.

  • Environments: Adds new environment.

  • Pages: Hosts individual, project, and organization pages straight from a repository.

  • Code and security analysis: Sets up code scanning and enables secret scanning. You can also enable dependency graph, Dependabot alerts, Dependabot security updates, and Dependabot version updates.

  • Deploy keys: Adds deploy keys, an HSS key that gives access to a single repository.

  • Secrets: A drop-down will reveal Action and Dependabot. Action adds new Action (environment and repository) secrets for the use of those with collaborator access to your repository. While Dependabots add encrypted secrets to the Dependabots at the repository or organization level.

  • GitHub apps: Sets up apps that integrate with specific repositories to enable you to automate and improve your workflow.

  • Email notifications: Sets up email notifications for when push events are triggered.

Master: Switches branches and tags. Also has an input bar where you can find or create a new branch.

Branch: Shows all branches, including active and stale branches.

Tags: Views tags and releases.

Go to file: Displays a search bar where you can type in the name of the file you’re looking for.

Add file: A drop-down allows you to create or upload new files.

Code: A green-colored button that enables you to clone a repository using either the HTTPS link, SSH key, or GitHub CLI. You can also download the repository as a zip file or open it with GitHub desktop.

About: This is where you provide topics that help classify your repository, plus a short description of what your repository is about.

Overall, not all the GitHub UI components were described above. Just enough for new and intermediate users to get started on the platform.

Top comments (0)