semantic-ui-react

What is semantic-ui-react?

semantic-ui-react is the official React integration for Semantic UI. It provides a set of React components that are styled using Semantic UI CSS framework, allowing developers to build responsive and visually appealing user interfaces with ease.

What are semantic-ui-react's main functionalities?

Buttons

The Button component allows you to create various types of buttons with different styles and behaviors. The example shows a primary button.

<Button primary>Primary Button</Button>

Forms

The Form component helps in creating forms with various input fields and validation. The example demonstrates a simple form with two input fields and a submit button.

<Form><Form.Field><label>First Name</label><input placeholder='First Name' /></Form.Field><Form.Field><label>Last Name</label><input placeholder='Last Name' /></Form.Field><Button type='submit'>Submit</Button></Form>

Modals

The Modal component is used to display content in a layer above the main content. The example shows a modal triggered by a button click, containing an image and some text.

<Modal trigger={<Button>Show Modal</Button>}><Modal.Header>Select a Photo</Modal.Header><Modal.Content><Image wrapped size='medium' src='/images/avatar/large/rachel.png' /><Modal.Description><Header>Default Profile Image</Header><p>We've found the following gravatar image associated with your e-mail address.</p><p>Is it okay to use this photo?</p></Modal.Description></Modal.Content><Modal.Actions><Button primary>Proceed</Button></Modal.Actions></Modal>

Menus

The Menu component is used to create navigation menus. The example shows a simple menu with three items.

<Menu><Menu.Item name='home' active /><Menu.Item name='messages' /><Menu.Item name='friends' /></Menu>

Cards

The Card component is used to display content in a card layout. The example shows a card with an image, header, meta information, description, and extra content.

<Card><Image src='/images/avatar/large/matthew.png' wrapped ui={false} /><Card.Content><Card.Header>Matthew</Card.Header><Card.Meta>Joined in 2015</Card.Meta><Card.Description>Matthew is a musician living in Nashville.</Card.Description></Card.Content><Card.Content extra><a><Icon name='user' />22 Friends</a></Card.Content></Card>

Other packages similar to semantic-ui-react

material-ui

Material-UI is a popular React UI framework that implements Google's Material Design. It provides a wide range of components and customization options. Compared to semantic-ui-react, Material-UI offers a more modern design aesthetic and a larger community.

antd

Ant Design (antd) is a comprehensive UI framework for React that provides a set of high-quality components and design guidelines. It is widely used in enterprise applications. Compared to semantic-ui-react, antd offers more components and a more extensive design system.

chakra-ui

Chakra UI is a simple, modular, and accessible component library for React. It focuses on providing a set of composable and customizable components. Compared to semantic-ui-react, Chakra UI emphasizes simplicity and ease of use, with a strong focus on accessibility.

react-bootstrap

React-Bootstrap is a popular UI framework that provides React components built using Bootstrap. It offers a familiar Bootstrap design and a wide range of components. Compared to semantic-ui-react, React-Bootstrap is more aligned with the traditional Bootstrap design and ecosystem.

README

Semantic UI React

Installation & Usage

See the Documentation for an introduction, usage information, and examples.

Built With

• Amazon Publishing — the full-service publisher of Amazon — APub.com
• Netflix's Edge Developer Experience team's numerous internal apps
• Netflix's flamescope
• Microsoft's Teams prototyping

Example Projects

This is a listing of example projects and guides that will help you integrate Semantic UI React into your new or existing projects.

Show projects

semantic-ui-react-todos

Semantic UI React implementation of react-redux Todo List.

FAQ

Can I use custom Icons?

Yes. Just use <Icon className='my-icon' /> instead of <Icon name='my-icon' />. See https://github.com/Semantic-Org/Semantic-UI-React/issues/931#issuecomment-263643210 for detailed info and examples.

How do I setup CSS?

There are several options. Refer to our doc on CSS Usage.

Can I use a custom CSS theme?

Yes. Semantic UI React includes components that render valid Semantic UI HTML, no CSS is included. This allows you to load any Semantic UI CSS theme on top of your Semantic UI React app.

Here are some helpful links:

• Building CSS with Webpack
• Building CSS with Meteor
• Creating a standalone theme

How Can I Help?

Voice Your Opinion

Help shape this library by weighing in on our RFC (request for comments) issues.

Contribute

Our CONTRIBUTING.md is a step-by-step setup and development guide.

Good First Issue

Issues labeled good first issue are a great way to ease into development on this project.

Missing Components

We're seeking component parity with Semantic UI, plus some addons. There is an issue for every missing component, labeled new component. Just comment on the issue you'd like to take.

Help Wanted Label

Any other issue labeled help wanted is ready for a PR.

Principles

• No animation dependencies
• Simple declarative component APIs vs brittle HTML markup
• Complete keyboard support
• Complete SUI component definition support
• Completely documented
• Completely tested
• Accessible

Credit

Created by @levithomason and an amazing community of contributors.

Made possible only by @jlukic authoring Semantic UI.

Blazing deployments by Vercel.

Changelog

v2.1.5 (2023-12-10)

:bug: Bug Fix

• #4446 fix(Popup): fix positioning in scrollable container (@CoryDuncan)