The official Semantic UI + React integration.
Hey, we're in development. There are big changes taking place while we migrate to Semantic-UI-Org. Minor versions may introduce breaking changes until the v1.0 release. You should read the CHANGELOG and related issues/PRs to stay up to date.
Help shape this library by weighing in on our RFC (request for comments) issues.
npm i stardust -SApp.js
import React, { Component } from 'react'
import { Button } from 'stardust'
export default class TryStardust extends Component {
render() {
return <Button>Hello</Button>
}
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try Stardust</title>
<!-- SUI CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>We then use Webpack to create bundle.js from App.js and include it in index.html.
For more complete examples, check out the Doc Site.
We use the debug module for debugging. You can turn debugging on and off via the localStorage.debug flag from the browser console. See the debug docs for more.
localStorage.debug = 'stardust:*' // default, debug all components
localStorage.debug = 'stardust:dropdown' // debug only the dropdown
localStorage.debug = null // turn debug offOnce you change the flag, you need to refresh your browser to see the changes in debug output.
Our CONTRIBUTING.md is a step-by-step setup and development guide. It is meant to be read from top to bottom. Once you're up to speed, we have two areas of focus:
Each issue includes more information on how you can help:
We're seeking component parity with Semantic UI, plus some addons. There is an issue for every missing component, labeled enhancement help wanted.
TechnologyAdvice has been dogfooding Stardust in production since fall of 2015. This living list is updated as we iterate. We'll lock it in as our v1.0 constitution soon.
- No jQuery dependency
- No animation dependencies
- Reuse SUI CSS transitions
- Complete keyboard support
- Complete SUI component definition support
- Completely documented
- Completely tested
- Abstract away HTML markup intricacies
| Elements | Collections | Views | Modules | Behaviors |
|---|---|---|---|---|
| x Button | x Breadcrumb | _ Advertisement | x Accordion | x Form Validation |
| x Container | x Form | x Card | x Checkbox | API (NA) |
| x Divider | x Grid | _ Comment | _ Dimmer | Visibility (NA) |
| x Flag | x Menu | x Feed | x Dropdown | |
| x Header | x Message | x Item | _ Embed | |
| x Icon | x Table | x Statistic | x Modal | |
| x Image | _ Nag | |||
| x Input | _ Popup | |||
| x Label | x Progress | |||
| x List | x Rating | |||
| x Loader | _ Search | |||
| x Rail | _ Shape | |||
| _ Reveal | _ Sidebar | |||
| x Segment | _ Sticky | |||
| x Step | _ Tab | |||
| _ Transition |
On the latest clean master:
npm run release:major
npm run release:minor
npm run release:patchMade with ❤️ @TechnologyAdvice, a ridiculous place to work.