# semantic-ui-riot
[](https://badge.fury.io/js/semantic-ui-riot)
[](https://github.com/black-trooper/semantic-ui-riot/blob/master/LICENSE)
[](https://www.npmtrends.com/semantic-ui-riot)
Semantic UI Riot is a set of [Riot](https://riot.js.org) components based on [Semantic UI](https://semantic-ui.com/) markup and CSS.
As a result no dependency on jQuery or Semantic UI's JavaScript is required.
Here is a list of minimal required versions of Riot and Semantic UI for semantic-ui-riot:
semantic-ui-riot |Riot |Semantic UI
-----------------|-----|------------
0.x.x | 3.0.0 | 2.3.0
1.x.x | 3.0.0 | 2.3.0
2.x.x | 4.0.0 or more | 2.3.0
## Demo
https://semantic-ui-riot.web.app/
## Getting started
### 1) Use in tag file
index.html
```html
```
sample.riot
```html
Make my profile visible
```
### 2) Use with webpack
```sh
npm install --save semantic-ui-riot
```
index.js
```javascript
import {component} from 'riot'
import 'semantic-ui-riot'
import Sample from './sample.riot'
component(Sample)(document.getElementById('app'))
```
webpack.config.js
```javascript
module.exports = {
module: {
rules: [
{
test: /\.riot$/,
exclude: /node_modules/,
use: [{
loader: '@riotjs/webpack-loader'
}]
}
]
}
};
```
index.html
```html
```
sample.tag
```html
Make my profile visible
```