The official integration between Semantic UI and React.
Hey, we're in development. There are big changes taking place while we migrate to SUI-Org. Minor versions may introduce breaking changes until the v1.0 release.
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.
First, get setup and acquainted with development by reading the contributing guidelines.
We're making two migrations right now:
Each of these issues includes a list of components and more information on how you can help.
There is an issue for every missing component. They are all labeled enhancement help wanted and we're accepting PRs for these.
Be sure to check out the above migrations before embarking on a new component. All new components should be written in accordance with the migrations above.
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 | _ Card | x Checkbox | API (NA) |
| x Divider | x Grid | _ Comment | _ Dimmer | Visibility (NA) |
| x Flag | x Menu | _ 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 | _ Rating | |||
| x Loader | _ Search | |||
| x Rail | _ Shape | |||
| _ Reveal | _ Sidebar | |||
| x Segment | _ Sticky | |||
| _ Step | _ Tab | |||
| _ Transition |
On the latest clean master:
npm run release:major
npm run release:minor
npm run release:patchOriginally created with ❤️ at TechnologyAdvice, a ridiculous place to work.