• Stars
    star
    13,117
  • Rank 2,266 (Top 0.05 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 9 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

The official Semantic-UI-React integration

Semantic UI React

Gitter Circle Codecov David npm

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 #931 (comment) 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:

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.

More Repositories

1

Semantic-UI

Semantic is a UI component framework based around useful principles from natural language.
JavaScript
50,753
star
2

Semantic-UI-Angular

Semantic UI Angular Integrations
TypeScript
561
star
3

Semantic-UI-CSS

CSS Only distribution
JavaScript
478
star
4

Semantic-UI-Ember

Official Semantic UI Integration for Ember
JavaScript
333
star
5

Semantic-UI-Docs

Official Documentation for Semantic UI
JavaScript
301
star
6

Semantic-UI-Meteor

Official Semantic UI Integration for Meteor
JavaScript
224
star
7

Semantic-UI-LESS

LESS only distribution
JavaScript
201
star
8

example-github

Example repo using Semantic UI to replicate GitHub Project Home
CSS
149
star
9

Semantic-UI-Rails-LESS

This is a gem for Rails with Semantic UI (http://semantic-ui.com) assets inside.
JavaScript
123
star
10

Semantic-UI-ar

سيمانتك يو آي تزيد فاعلية العمل بين المصممين و المطورين من خلال مفردات ذات دلالة لفظية مشتركة لبناء واجهة المستخدم
JavaScript
42
star
11

Example-External-Gulpfile

Example of importing gulp tasks into your gulpfile
JavaScript
27
star
12

UI-Dropdown

A dropdown allows a user to select a value from a series of options
JavaScript
24
star
13

Learn-Semantic

Official repo of learnsemantic.com
JavaScript
24
star
14

Semantic-UI-Angular2

20
star
15

UI-Icon

An icon is a glyph used to represent a concept
CSS
14
star
16

Semantic-UI-SASS

Semantic UI SASS Port
13
star
17

UI-Modal

A modal displays content that temporarily blocks interactions with the main view of a site
JavaScript
13
star
18

UI-Sidebar

A sidebar hides additional content beside a page.
JavaScript
13
star
19

UI-Transition

A transition is an animation usually used to move content in or out of view
JavaScript
12
star
20

UI-Card

A card displays site content in a manner similar to a playing card
CSS
10
star
21

UI-Button

A button indicates a possible user action
CSS
9
star
22

UI-Search

A search element allows a user to query for results from a selection of data
JavaScript
9
star
23

UI-Flag

A flag is is used to represent a political state
CSS
8
star
24

UI-Loader

A loader alerts a user to wait for an activity to complete
CSS
8
star
25

UI-Menu

A menu displays grouped navigation actions
CSS
8
star
26

UI-Popup

A popup displays additional information on top of a page
JavaScript
8
star
27

Module-Examples

Annotated source of Semantic UI Module Format
JavaScript
7
star
28

UI-Form

A form displays a set of related user input fields in a structured way
JavaScript
7
star
29

UI-Table

A table displays a collections of data grouped into rows
CSS
7
star
30

UI-Visibility

Visibility provides a set of callbacks for when a content appears in the viewport
JavaScript
6
star
31

Semantic-UI-Meteor-Data

Data package for Semantic UI Meteor
JavaScript
6
star
32

UI-Progress

A progress bar shows the progression of a task
JavaScript
5
star
33

UI-Checkbox

A checkbox allows a user to select a value from a small set of options, often binary
JavaScript
5
star
34

UI-Site

A site is a set of global constraints that define the basic parameters of all UI elements
JavaScript
5
star
35

UI-Embed

An embed displays content from other websites like YouTube videos or Google Maps
JavaScript
5
star
36

UI-Grid

A grid is used to harmonize negative space in a layout
CSS
5
star
37

UI-Placeholder

Semantic UI placeholder component
CSS
4
star
38

UI-Rating

A rating indicates user interest in content
JavaScript
4
star
39

UI-Step

A step shows the completion status of an activity in a series of activities
CSS
4
star
40

UI-Tab

A tab is a hidden section of content activated by a menu
JavaScript
4
star
41

UI-Item

An item view presents large collections of general site content for display
CSS
4
star
42

UI-Reset

A reset is a set of normalized values for CSS properties that correct for abberations in browser defaults
CSS
4
star
43

UI-Label

A label is used to display content classification
CSS
4
star
44

UI-Sticky

Sticky content fixes itself to the browser viewport as content is scrolled
JavaScript
4
star
45

UI-Api

API allows elements to trigger actions on a server
JavaScript
4
star
46

UI-Container

CSS
3
star
47

UI-Statistic

A statistic displays the current value of an attribute
CSS
3
star
48

UI-Accordion

An accordion allows users to toggle the display of sections of content
JavaScript
3
star
49

UI-Video

This is a legacy component and is no longer maintained
JavaScript
3
star
50

UI-Reveal

A reveal displays additional content in place of previous content when activated
CSS
3
star
51

UI-Divider

A divider visually segments content into groups
CSS
3
star
52

UI-Nag

A nag is an important message that persists until dismissed by a user
JavaScript
3
star
53

UI-Message

A message displays information that explains nearby content
CSS
3
star
54

UI-Segment

A segment is used to create a grouping of related content
CSS
3
star
55

UI-Breadcrumb

A breadcrumb is used to show heirarchy between content
CSS
2
star
56

Semantic-UI-Docs-Api

Sequelize / Express Server For API Demos
JavaScript
2
star
57

UI-Feed

A feed presents user activity chronologically
CSS
2
star
58

Semantic-UI-Legacy

Hosts pre-release version of library and documentation
JavaScript
2
star
59

UI-List

A list is used to group related content
CSS
2
star
60

UI-Ad

CSS
2
star
61

UI-Comment

A comment displays user feedback to site content
CSS
2
star
62

UI-Shape

A shape is a three dimensional object displayed on a two dimensional plane
JavaScript
2
star
63

UI-Image

An image is a graphic representation of something
CSS
2
star
64

UI-Dimmer

A dimmer hides distractions to focus attention on particular content
JavaScript
2
star
65

Semantic-UI-1.0-Docs

This repository hosts deployed files for 1.x Semantic UI Docs
JavaScript
2
star
66

UI-Header

A header provides a short summary of content
CSS
1
star
67

Semantic-UI-Beta-Docs

Docs for beta version of Semantic UI
JavaScript
1
star
68

UI-Input

An input is a field used to elicit a response from a user
CSS
1
star
69

UI-Rail

A rail is used to show accompanying content outside the boundaries of the main view of a site
CSS
1
star