Github UI components examples

Github

A global application header featuring a top bar with search and user actions, a secondary navigation bar with tabs, and a blue trial status banner at the bottom.

• Horizontal navigation

Github

A comprehensive vertical sidebar navigation menu for organization settings, featuring collapsible sections, nested items, and an active state indicator.

• Vertical navigation

Github

A horizontal stepper component indicating progress through a three-step process, with the first step currently active.

• Stepper

Github

A card containing a setting title, a descriptive paragraph, and a toggle switch to enable or disable the setting.

• Toggle/Switch

Github

A card containing a setting title, a descriptive paragraph explaining the setting's behavior, and a toggle switch currently in the 'On' state.

• Toggle/Switch

Github

A settings section for configuring the application's visual theme. It includes a dropdown to sync with the system theme and two cards for selecting specific day and night themes, complete with visual previews and color swatches.

• Theme settings

Github

A settings section for selecting a UI theme. It includes a dropdown for theme mode (single or sync with system) and a grid of selectable theme cards with visual previews and radio buttons.

• Theme settings

Github

A mirrored area chart showing code additions and deletions over time. Additions are plotted above the zero line in green, and deletions are plotted below the zero line in red.

• Charts

Github

A stacked view of two charts showing commit activity over time. The top chart is a bar chart displaying weekly commit volume over a year, with the most recent week highlighted in red. The bottom chart is a line chart showing the daily distribution of commits for a selected…

• Charts

Github

A checklist displaying the completion status of recommended community standards for a repository. It includes a progress bar at the top and a list of items with checkmarks or bullet points indicating their status.

• Stepper

Github

A dashboard displaying a main area chart of overall repository contributions over time, followed by a grid of individual contributor cards. Each card shows the contributor's rank, avatar, name, commit stats (additions and deletions), and a personal sparkline-style area chart…

• Charts

Github

A dashboard section displaying a summary of repository activity over a selected period. It includes a date range header with a period selector, an overview card with progress bars and KPI tiles for pull requests and issues, and a section below with a text summary of commits…

• Charts