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 —
  • 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 implementation of react-redux Todo List.


Can I use custom Icons? Yes. Just use <Icon className='my-icon' /> instead of <Icon name='my-icon' />. See 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.


Our 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.


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


Created by @levithomason and an amazing community of contributors.

Made possible only by @jlukic authoring Semantic UI.

Blazing deployments by Vercel.

  • feat(Popup): add component

    feat(Popup): add component

    Port of SUI Popup module

    Fixes #193

    • [x] sizing
    • [x] content / header
    • [x] positioning
    • [x] events
      • [x] hover
      • [x] click
      • [x] focus
    • [x] hoverable (will be fixed by #590)
    • [x] widths
      • [x] use SUI enums
    • [x] sizes
      • [x] use SUI enums
    • [x] inverted
    • [x] basic
    • [x] offset
    • [x] hideOnScroll (quick solution to scrollable sub-content like a sidebar)
    • [x] exclusive
    • [x] custom class names
    • [x] custom styles

    To be done later:

    • inline (popup as a sibling of trigger, will be implemented later)
    • transition (animation will probably be for later)
    enhancement ready for review 
    opened by typehorror 50
  • RFC: React Native?

    RFC: React Native?

    Maybe a little ambitious, but I am SOOOO excited to use this library!

    I also would love to use it (at least common elements) in my React Native app. Thoughts?

    opened by mmahalwy 45
  • perf(props): Remove propTypes from production build

    perf(props): Remove propTypes from production build

    For details - #524

    This PR might to do:

    • [x] updates contributing guide;
    • [x] updates getUnhandledProps function;
    • [x] adds new sections for common tests.
    • [x] updates ComponentProps component in docs (we can't rely on meta anymore).

    @levithomason I've updated Rail component, waiting for review there.

    enhancement optimization ready for review 
    opened by layershifter 42
  • Search Component: Unknown props error

    Search Component: Unknown props error

    I have a search component with a custom renderer and I keep getting the error Warning: Unknown props_id,url, ... on <div> tag. Remove these props from the element..

    The array I pass to results has these extra props, mentioned in the error, but I am using a custom renderer, so it seems to me they should be ignored.

    Here is my custom renderer

    const resultRenderer = ({ _id, name, url, logo}) => {
        return (
            <div key={_id}>
                <Label content={name}  />
    resultRenderer.propTypes = {
      name: PropTypes.string

    My component is really simple

    export default class CompanyForm extends Component {
        constructor(props) {
            this.state = {
                isLoading: false,
                value: '',
                results: [],
                company: null
        handleResultSelect(e, result) {
                company: result
        handleSearchChange(e, value) {
                value: value
                    query: {
                        name: {'$search': value }
                .then(results => {
                        isLoading: false,
                .catch(err => {
        render() {
            const {isLoading, value, results} = this.state;
            return (
                    onSearchChange={ this.handleSearchChange.bind(this)}

    The above code is what's causing the warning.

    bug help wanted 
    opened by imns 41
  • feat(Tab): Add component

    feat(Tab): Add component

    Fixes #199. This PR adds the Tab component. There are a number of ways we could go with the API. I'll post an API proposal soon.

    Considering a Tab component is simply a tabular menu followed by some tab segments, I think we may create very a simple Tab API. More complicated use of Tabs could use an actual Menu and Segments with manual wiring of the click handlers and active class.

    Simple Tabs


      <Tab.Pane name='First'>
      <Tab.Pane name='Second'>
      <Tab.Pane name='Third'>

    Custom Tabs

    This type of customization requires a full definition of the Menu component (icons, right sub menu, etc). I think at this point, the user should just wire in their click handlers to render tab Segments manually. An API for doing this will make the simple use case obtuse.

    Open to suggestions on how to accomplish both with a clean and concise API.



    This component doesn't lend itself well to an array shorthand prop such as panes since the content is bound to be much more than just text. Because of this children will be used often. It is difficult and unreliable to loop/filter children to add click handlers and props for auto controlling things like the active Segment (pane). We are also avoiding React context to do so if at all possible.

    Given these points, I'm leaning toward something like the simple tabs markup shown above. Will come back to this later. Feedback is much welcomed.

    enhancement ready for review 
    opened by levithomason 39
  • Migrating to Semantic-UI-React

    Migrating to Semantic-UI-React

    Semantic-Org maintains a collection of official integrations with various libraries. There is a missing spot for React. Per this thread, Stardust will fill this hole and become the official Semantic UI React integration.

    This issue will serve as the place to hash out all the moving parts of making the migration. As concerns and solutions are raised, I'll keep an updated list of TODOs for migration here. Once complete, we'll point everything to the new location.

    There is great mutual benefit to both TechnologyAdvice and Semantic-Org in this merge. Big thanks to @jlukic for the idea.


    This is an organic list, based on the comments in this issue:

    • [x] Transfer the repo
    • [x] Update all links to point to the new repo address
    • [x] Deprecate stardust and publish under semantic-ui-react
    • [x] Update codepen script href and global variable
    • [x] remove current semantic-ui-react owner and add TA owners
    • [x] ~~#244 Complete the migration to enzyme for testing~~
    • [x] ~~#245 Setup coverage~~
    • [x] ~~README~~
      • [x] ~~SUI branding~~
      • [x] ~~#377 Why SUI-React?
      • [x] ~~Coverage badge~~
      • [x] ~~Highlight project features & philosophy~~
        • complete component library, no html markup required
        • expressive component APIs (compare & contrast className buildup)
        • powerful and consistent prop handlers (see propUtils icon, image, etc)
        • keyboard shortcuts
        • full feature support (in progress)
      • [x] ~~#377 Show side-by-side comparisons of SUI mark up to Component APIs~~
      • [x] ~~Add TA attribution~~
    • [x] ~~semantic-ui-react npm package (
    • [x] ~~Remove deweybot staging deployments~~
    • [x] ~~Update with milestones~~
      • [x] #269 ~~Label legacy components for v1.0 upgrade high priority help wanted~~
      • [x] ~~Label missing components enhancement help wanted~~
    • [x] Doc Site
      • [x] ~~"How to write a component" (should replace / encompass
      • [x] ~~#337 Replicate SUI doc site routes~~
      • [x] ~~Include "contribute" links for missing docs~~
      • [x] ~~#395 Add TA attribution~~

    Needs Resolution

    TA Credit

    TechnologyAdvice has put a large amount of time and money into Stardust. We'd like to retain attribution through the merge. We're open to ideas on how this is accomplished. Our initial thoughts were along the lines of an unobtrusive link in the footer of the README and/or doc site.


    TA must retain admin permissions to the repo. We use Stardust in production and need full rights to the source at all times. This also applies to repo settings. We have bot users and other integrations that we'd need to maintain.

    Project Direction

    Though the project will continue to be developed as a community effort, a @TechnologyAdvice representative will continue to lead the project. Currently, that is @levithomason.

    First Steps!

    Since @jlukic has been through this a few times, love to hear your thoughts on the first steps to moving things over to Semantic-Org.

    cc @athurman @davezuko @Fluidbyte @kyleturco @stephen-ta @TomFrost @thomasruns

    Please let me know if I've overlooked anything.

    opened by levithomason 39
  • Add Step component

    Add Step component




    A single step

    <div class="ui steps">
      <div class="step">
    // or
    const items = [
      {text: 'Shipping'}
    <Step.Group steps={items}>



    A set of steps

    <div class="ui steps">
      <div class="step">
        <i class="truck icon"></i>
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
      <div class="active step">
        <i class="payment icon"></i>
        <div class="content">
          <div class="title">Billing</div>
          <div class="description">Enter billing information</div>
      <div class="disabled step">
        <i class="info icon"></i>
        <div class="content">
          <div class="title">Confirm Order</div>
      <Step icon='truck'>
      <Step active icon='payment'>
        <Step.Description>Confirm Order</Step.Description>
      <Step disabled icon='info' title='Confirm Order' />
    // or
    const items = [
      {icon: 'truck', title: 'Shipping', description: 'Shipping'},
      {active: true, icon: 'payment', title: 'Billing', description: 'Confirm Order'},
      {disabled: true, icon: 'info', title: 'Confirm Order'},
    <Step.Group steps={items}>


    A step can show a ordered sequence of steps

    <div class="ui ordered steps">
      <div class="completed step">
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
    <Step.Group ordered>
      <Step completed>
    // or
    const items = [
      {completed: true, title: 'Billing', description: 'Confirm Order'},
    <Step.Group ordered steps={items}>


    A step can be displayed stacked vertically

    <div class="ui vertical steps">...</div>
    <Step.Group vertical>...</Step.Group>
    <Step.Group vertical steps={items}>



    A step can contain a description

    Already described


    A step can contain an icon

    Already described


    A step can link

    // Case 1
    <div class="link step"></div>
    // Case 2
    <a class="active step">...</a>
    // Case 1
    <Step link>...</Step>
    // Case 2
    <Step active href=''>...</Step>
    <Step active onClick={handler}>...</Step>



    A step can be highlighted as active

    Already described


    A step can show that a user has completed it

    Already described


    A step can show that it cannot be selected

    <div class="disabled step"></div>
    <Step disabled>...</Step>



    A step can stack vertically only on smaller screens


    A step can be displayed stacked vertically

    <div class="ui tablet stackable steps">...</div>
    <Step.Group stackable='tablet'>...</Step.Group>
    <Step.Group stackable='tablet' steps={items}>


    A fluid step takes up the width of its container

    <div class="ui fluid steps">...</div>
    <Step.Group fluid>...</Step.Group>


    Steps can be attached to other elements

    <div class="ui top attached steps">...</div>
    <Step.Group attached='top'>...</Step.Group>

    Evenly Divided

    Steps can be divided evenly inside their parent

    <div class="ui two steps"></div>

    Equal Width

    <Step.Group widths='equal'>
      <Step />
      <Step />
    <div class="ui two steps">
      <div class="step"></div>
      <div class="step"></div>

    Explicit Widths

    <Step.Group widths={2}> // or widths='two'
      <Step />
      <Step />
    <div class="ui two steps">
      <div class="step"></div>
      <div class="step"></div>


    Steps can have different sizes

    <div class="ui mini steps">...</div>
    <Step.Group size='mini'>...</Step.Group>

    Fixes #183

    opened by layershifter 33
  • RFC: remove production propTypes, allow small custom builds

    RFC: remove production propTypes, allow small custom builds

    I've builded stardust with webpack in my project.

    There are two problems:

    • [x] unused components in bundle that increases bundle size;
    • [x] PropTypes are in production bundle, too.

    bundlers TODO

    • [x] #1452 test that webpack 1 removes propTypes from production build, also check SUI.js usage
    • [ ] #1497 test that webpack 2 treeshaking works
    • [ ] test that rollup works

    propTypes update

    • [x] #1216 Button
    • [x] #1159 Container
    • [x] #1159 Divider
    • [x] #1155 Flag
    • [x] #1159 Header
    • [x] #1159 Icon
    • [x] #1155 Image
    • [x] #1167 Input
    • [x] #1265 Label
    • [x] #1270 List
    • [x] #1165 Loader
    • [x] #731 Rail
    • [x] #1165 Reveal
    • [x] #1165 Segment
    • [x] #1203 Step
    • [x] #1209 Breadcrumb
    • [x] #1320 Form
    • [x] #1231 Grid
    • [x] #1264 Menu
    • [x] #1254 Message
    • [x] #1200 Table
    • [x] #1284 Card
    • [x] #1293 Comment
    • [x] #1285 Feed
    • [x] #1294 Item
    • [x] #1232 Statistic
    • [x] Accordion
    • [x] #1155 Checkbox
    • [x] Dimmer
    • [x] #1334 Dropdown
    • [x] #1217 Embed
    • [x] #1331 Modal
    • [x] #1322 Popup
    • [x] #1269 Progress
    • [x] #1253 Rating
    • [x] #1150 Search
    • [x] #1296 Sidebar
    • [x] #1282 Confirm
    • [x] #1300 Portal
    • [x] #1155 Radio
    • [x] Select
    • [x] Text Area
    optimization RFC 
    opened by layershifter 32
  • feat(datetime): Add component

    feat(datetime): Add component

    This is a work in progress mainly focused on exploring the possiblity of adding a datetime component which supports date ranges, time and localisation.


    Bugs and Features

    • [ ] allow typing/pasting dates into the input field
    • [x] do not show completely disabled weeks in month view
    • [ ] Menu needs some work, buttons don't make sense in all states
    • [ ] Expose ways to customize the menu and table as well
    • [ ] Add some more props for configuring the view and doc examples
      • [ ] showWeekends
      • [ ] showDaysOfWeek
    • [ ] if at all possible, remove inline styles. required styles should be configurable.
    • [ ] move to 5 button CalendarMenu: << < Mo, Yr > >>. double chevrons change year, single change month, mo
    • [ ] don't allow selecting invalid ranges: start > end
    • [ ] use 12hr time grid with AM/PM option
    • [ ] provide onChange callbacks with (e, { value }) where value is the proposed new value.
    • [ ] Add dateSeparator prop to DateRange to control the separator string between the two dates


    • [ ] document function prop signatures
    • [x] change Week starts Sunday example to First Day Of Week show two examples, start on Sun, another on Monday.
    • [x] fix disabled days example, do not import date utils


    • [x] move component to /addons
    • [x] remove cruft propTypes that do not exist
    • [ ] sort propTypes alphabetically
    • [ ] update Month.js to use DateTimeGrid,
    • [ ] complete all code TODOs in /Datetime
    • [x] reverse onDateSelect args to match other callbacks, with event first.
    • [ ] remove unused methods in classes
    opened by harel 31
  • Popup: zIndex is not applied in v2

    Popup: zIndex is not applied in v2

    Bug Report


    Originally we have a Popup inside a Modal. On hover the Popup will not show up.

    Expected Result

    Should behave as in 1.3.1.

    Actual Result

    Popup is behind the Modal.



    Testcase => Reason


    created as a popup container no longer has ANY classes, esp. not .ui.popup. Especially the z-index is not set.

    popup1 popup2

    The class is set one level below the outer div and the z-Index (1900) is no longer able to move the Popop contents above the modal.

    opened by JMS-1 30
  • Prepare for upcoming react deprecations introduced in 16.3

    Prepare for upcoming react deprecations introduced in 16.3

    Suggestion: begin migration to new react lifecycles while retaining backwards compatibility via react-lifecycles-compat



    • Use new lifecycle methods introduced in react 16.3 in a component that renders react-semantic-ui components.

    Expected Result

    • React does not log errors/warning about upcoming deprecations to the console.

    Actual Result

    • React IS logging errors/warning about upcoming deprecations to the console.




    opened by justinobney 28
  • Support for newer versions of react-scripts (v5) and craco (v7)

    Support for newer versions of react-scripts (v5) and craco (v7)

    Bug Report


    I had been looking to upgrade react-scripts to v5 and craco has released a compatible version (v7).
    I updated everything to the latest including semantic-ui-react/craco-less to 3.0.0 and it no longer builds.
    There's some compatibility information in a comment here This doesn't cover craco v7 but the build also failed with the suggested craco v6 setup.

    Expected Result

    The build to succeed.

    Actual Result

    • The build no longer understands exports from my colors.module.less file so all imports fail
    • The build throws a lengthy error about not being able to handle a data: uri when attempting to load semantic.less


    craco 7.0.0 @semantic-ui-react/craco-less 3.0.0 react-scripts 5.0.0 semantic-ui-less 2.4.1 semantic-ui-react 2.0.3

    Sample build errors

    ERROR in ./src/components/Accordion.tsx 37:317-331
    export 'mpmActionColor' (imported as 'mpmActionColor') was not found in 'semantic-ui/colors' (module has no exports)
    Webpack supports "data:" and "file:" URIs by default.
    You may need an additional plugin to handle "data:" URIs.
    @ ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[2]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[3]!./node_modules/semantic-ui-less/semantic.less 22:37-5903
     @ ./node_modules/semantic-ui-less/semantic.less 8:6-258 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-228 83:0-228 84:22-29 84:33-47 84:50-64 61:4-74:5
     @ ./src/index.tsx 21:0-40
    opened by kyle-sawatsky 1
  • v3: roadmap to release

    v3: roadmap to release

    This PR tracks work for Semantic UI React v3 🎉

    Pre beta-1

    • [x] chore: replace ta-scripts with release-it

    For beta-1

    • [x] All components support native ref forwarding #4233
    • [x] BREAKING CHANGE remove Ref component #4286
    • [x] BREAKING CHANGE remove Visibility component #4257
    • [x] BREAKING CHANGE Input, Button & TextArea are forwarding refs to native elements
    • [x] BREAKING CHANGE Transition static props #4266

    Post beta-1

    • [ ] Document breaking changes

    For beta-2

    • [ ] test: update typings, ensure that they support ref forwarding

    For beta-3

    • [ ] BREAKING CHANGE Event handling: remove eventStack
    • [ ] test: validateTrigger should handle forwardRef
    • [ ] chore: remove .displayName in production
    • [ ] docs: update contributing guide
    • [ ] docs: update Github templates
    • [ ] docs: update introduction to remove AutoControlledComponent mentions
    • [ ] docs: rename classname generators (currently they violate rules of hooks as their names start with use)
    • [ ] chore: enable ESLint plugin for rules of hooks

    For RC

    • [ ] chore: integrate monosize
    • [ ] chore: add bundle size fixtures for all components
    • [ ] chore: remove dependency on lodash

    After release

    • [ ] docs: update CodeSandbox templates
    opened by layershifter 0
  • Dropdown values are not displayed when Dropdown Items are JSX

    Dropdown values are not displayed when Dropdown Items are JSX

    Bug Report

    I see a merge many years back for this issue #1380 but it is still an issue for me. Was it rolled back at some point? If using JSX templating for the Dropdown items it doesn't seem to indicate values at all for multiple selection. Kinda tricky to handle onChange as well but at least that's addressable.


      placeholder="Select options..."
      value={data.myDropdown || []}
        {, key) => (
        <Dropdown.Item key={key} value={option.value} onClick={(e, control) => handleOptionChange(e, control)}>
          <table className="selected">
                <td><Icon name={option.icon} size='big' /></td>
                  <div className="text">{option.text}</div>
                  <div className="description">{option.description}</div>

    Expected Result

    Chosen/existing values should be displayed

    Actual Result

    No selected values are displayed




    JSX Dropdown Test Sandbox

    opened by replaysMike 0
  • Checkbox control always sets the

    Checkbox control always sets the "readonly" attribute, which disables form validation

    Bug Report


    The Checkbox control is hardcoded to always set readOnly on its Input, even if you don't pass the readOnly prop.

    This means the element is always in the readonly state, which causes HTML validation to always pass, even if the element is actually in an invalid state (e.g. being required).

    Expected Result

    It should be possible to use required with a Checkbox component and have form validation and methods such as checkValidity() work correctly.

    Actual Result

    Expected form validation does not occur because the element is in the readonly state. This allows a user to submit a form without checking a required value, even when you've set the required prop.




    opened by ilmiont 1
  • Card Colour Thickness

    Card Colour Thickness

    Feature Request

    Problem description

    There is an option to set a colour for various elements, including the card element. Currently, the visual display is quite subtle and minimalistic. It is controlled by a box-shadow CSS property where the thickness is set to 2. I would like the ability to set this thickness, giving the option to customise it and emphasise it. From my understanding, doing this with overriding CSS would break the ability to select the colour via the API.

    <Card color='yellow'>

    Proposed solution

    Add the option to specify the border thickness via the API.

    <Card color='yellow' colourThickness='5'>

    opened by adam-bentley 1
Semantic Org
Semantic Organization
Semantic Org
React UI is a react UI library that uses the latest design language

coming-ui React UI is a react UI library that uses the latest design language Documentation

jantongCode 20 Apr 22, 2022
A Twitter clone made for my final project in The Odin Project's React portion. This clone was made with React js and with Atomic Design as a pattern. The backend is handled by Firebase.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Thiago Porto 9 Aug 28, 2022
flowbite-react is an open source collection of UI components, built in React, with utility classes from Tailwind CSS

flowbite-react is an open source collection of UI components, built in React, with utility classes from Tailwind CSS

Themesberg 627 Jan 5, 2023
Modern and minimalist React UI library.

Modern and minimalist React UI library, originating from Vercel's design. Quick Start run yarn add @geist-ui/react or npm i @geist-ui/react install it

Geist 3.5k Jan 6, 2023
🌈 A UI Design Language and React UI library

Ant Design An enterprise-class UI design language and React UI library. English | Português | 简体中文 ✨ Features ?? Enterprise-class UI designed for web

Ant Design Team 83.7k Jan 9, 2023
Configurable React Components with great UX

Belle Configurable React Components with great UX. Website & Documentation: Getting Started Belle is available as npm

Nik Graf 2.5k Dec 12, 2022
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 30.6k Jan 8, 2023
🌲 Evergreen React UI Framework by Segment

Works out of the box. Evergreen contains a set of polished React components that work out of the box. Flexible & composable. Evergreen components are

Segment 12k Jan 8, 2023
🌈 React components that inspired by Microsoft's Fluent Design System.

Fluent-Windows React components that inspired by Microsoft's Fluent Design System. English | 简体中文 Installation Install the package in your project dir

Fluent-UI 122 Dec 17, 2022
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 8.1k Dec 31, 2022
A set of React UI components that supports Pinterest’s design language

Gestalt Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and

Pinterest 4.1k Jan 4, 2023
An opinionated UI components library for React. Based on Styled Components and Styled System.

Insites UI Insites UI is an opinionated UI components library, powered by TypeScript, Styled Components and Styled System. It comes with source versio

Sodify 29 Nov 26, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 14.5k Dec 30, 2022
React components of open-source Orbit design system by

Orbit-components is a React component library which provides developers with the easiest possible way of building’s products. Orbit Mission O 1.3k Dec 31, 2022
The Most Complete React UI Component Library

PrimeReact PrimeReact is a rich set of open source UI Components for React. See PrimeReact homepage for live showcase and documentation. Download Prim

PrimeFaces 3.4k Jan 9, 2023
Bootstrap components built with React

React-Bootstrap Bootstrap 4 components built with React. Docs See the documentation with live editable examples and API documentation. To find the doc

react-bootstrap 21.4k Jan 1, 2023
Foundation as React components.

React + Foundation Foundation as React components. Demo Components with Bit Motivation Foundation is both

Digia 598 Dec 24, 2022
Toolkit for building accessible rich web apps with React

Reakit Toolkit for building accessible rich web apps with React. Explore website » Sponsors By donating $100 or more you become a sponsor and help in

Reakit 6.4k Jan 5, 2023
:atom_symbol: React primitive UI components built with styled-system.

Rebass React primitive UI components built with Styled System. npm i rebass Getting Started import React from 'react' import { Bo

Rebass 7.9k Jan 8, 2023