Semantic UI React  1.3.0
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypes
Elements
ButtonContainerDividerFlagHeaderIconImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormGridMenuMessageTable
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchSidebarStickyTabTransition
Behaviors
Visibility
Addons
ConfirmMount NodePaginationPortalRadioRefResponsiveSelectText AreaTransitionable Portal

Responsive
Deprecated
Responsive can control visibility of content.

src/addons/Responsive/Responsive.js
Semantic UI Responsive Docs
Deprecation notice

Responsive component is deprecated and will be removed in the next major release. Please follow our upgrade guide.

Types

Responsive

Responsive is always visible.

Try itCodeSandboxMaximizePermalink
Instead of Grid visibility breakpoints, Responsive doesn't render invisible content.
I'm always visible by default

Minimal Width

You can pass minimal width value at which content will be displayed.

Try itCodeSandboxMaximizePermalink
Visible only if display has 768px width and higher
Visible only if display has 992px width and higher

Maximum Width

You can pass maximum width value at which content will be displayed.

Try itCodeSandboxMaximizePermalink
Visible only if display has 2569px width and lower

Mixed

You can pass minimal and maximum width value at which content will be displayed.

Try itCodeSandboxMaximizePermalink
Visible only if display has width between 320px and 2559px

Content

Responsive can contain different content.

Try itCodeSandboxMaximizePermalink
HomeMessages

Usage

The Responsive component relies on browser environment variables and requires some additions tricks to work correctly with the server side rendering. We prepared an example that uses Responsive and NextJS.
Try on CodeSandbox

Predefined breakpoints

Responsive has predefined breakpoints that mimics SUI default variables.

OnUpdate

Responsive listens for window resize events and calls event handler.

Fire on mount

Responsive can fire callbacks immediately after mount.

This is the bottom
Blazing deployments by Vercel.