https://github.com/muratoner/semantic-ui-react-native

UI kit for react-native
https://github.com/muratoner/semantic-ui-react-native

react react-native ui-kit uikit

Last synced: about 1 year ago
JSON representation

UI kit for react-native

• Host: GitHub
• URL: https://github.com/muratoner/semantic-ui-react-native
• Owner: muratoner
• License: mit
• Created: 2020-12-15T17:31:55.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-11-12T11:46:58.000Z (over 4 years ago)
• Last Synced: 2025-05-08T08:02:07.042Z (about 1 year ago)
• Topics: react, react-native, ui-kit, uikit
• Language: JavaScript
• Homepage:
• Size: 2.43 MB
• Stars: 10
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  





  Semantic UI Kit For React Native





  

  

  

  

  





  

  

  

  



| Avatar | Button | Checkbox | Divider |

| --- | --- | --- | --- |

| ![Avatar](https://user-images.githubusercontent.com/4863567/103491535-a5fd3480-4e35-11eb-9fe3-3afacf6b5687.png) | ![Button](https://user-images.githubusercontent.com/4863567/103447395-d7da9380-4c9b-11eb-8262-fc73a60a70bf.png) | ![Checkbox](https://user-images.githubusercontent.com/4863567/103447377-a19d1400-4c9b-11eb-87ca-6083ecf43ff5.png) | ![Divider](https://user-images.githubusercontent.com/4863567/103447430-34d64980-4c9c-11eb-935d-d99d240fa080.png) |

| Icon | LabeledButton | ProgressBar | Title |

| --- | --- | --- | --- |

| ![Icon](https://user-images.githubusercontent.com/4863567/103447550-cd20fe00-4c9d-11eb-9fec-34805aec2c63.png) | ![LabeledButton](https://user-images.githubusercontent.com/4863567/103447556-e164fb00-4c9d-11eb-968f-6ff9dd44b4dc.png) | ![ProgressBar](https://user-images.githubusercontent.com/4863567/103447661-20e01700-4c9f-11eb-8133-c8939fc97721.png) | ![Title](https://user-images.githubusercontent.com/4863567/103447669-39503180-4c9f-11eb-99c6-c37a5cd62055.png) |

| SocialIcon Button | ? | ? | ? |

| --- | --- | --- | --- |

| ![SocialIcon](https://user-images.githubusercontent.com/4863567/103476323-9e9e4280-4dc5-11eb-853f-bb02800bddeb.png) | ![Construction](https://user-images.githubusercontent.com/4863567/103470071-69223680-4d7e-11eb-9eeb-438e34ca9c65.png) | ![Construction](https://user-images.githubusercontent.com/4863567/103470071-69223680-4d7e-11eb-9eeb-438e34ca9c65.png) | ![Construction](https://user-images.githubusercontent.com/4863567/103470071-69223680-4d7e-11eb-9eeb-438e34ca9c65.png) |

## Get Started

### Installation

#### Step 1: Install @muratoner/semantic-ui-react-native

```bash

# yarn

yarn add @muratoner/semantic-ui-react-native

# or with npm

npm i @muratoner/semantic-ui-react-native --save

```

#### Step 2: Install react-native-vector-icons

If you have already installed react-native-vector-icons as a dependency for your project you can skip this step. Otherwise run the following command:

> Manual linking of react-native-vector-icons is not necessary if you're using react-native@0.60.0 or above since it is done automatically. This will throw an error though it won't prevent the application from running. To fix this you'll simply have to run react-native unlink react-native-vector-icons and the process will run as expected.

```bash

# yarn

yarn add react-native-vector-icons

# or with npm

npm i --save react-native-vector-icons

# link

react-native link react-native-vector-icons

```

If you have any issues installing react-native-vector-icons, check out their installation guide [here](https://github.com/oblador/react-native-vector-icons#installation).

### Usage

Start using the components or try it on Snack

[here](https://snack.expo.io/@muratoner/semantic-ui-react-native).

```js

import { Button, LabeledButton } from '@muratoner/semantic-ui-react-native';

;

;

```

## Components

- [ ] Accordion

- [ ] Actionsheet

- [x] Avatar

- [ ] Avatar Group

- [x] Badge

- [ ] BottomSheet

- [ ] Breadcrumb

- [x] Button

- [ ] ButtonGroup

- [ ] Card

- [x] Center

- [ ] Color Picker

- [x] Column

- [x] CheckBox

- [ ] CheckBoxGroup

- [ ] Comment

- [ ] Collapse

- [x] Divider

- [ ] Dimmer

- [ ] Feed

- [ ] Flag

- [x] Flex

- [ ] Grid

- [ ] Header

- [ ] HTML style headings

- [x] Icon

- [x] Inset

- [ ] Image

- [ ] Input

- [ ] Label

- [ ] ListItem

- [ ] Loader

- [ ] Message

- [ ] Overlay

- [ ] Placeholder

- [ ] Pricing

- [x] Progress

- [ ] Rating

- [ ] RadioGroup

- [x] Row

- [ ] SearchBar

- [ ] Segment

- [x] Stack

- [ ] Statistic

- [ ] Step

- [ ] Slider

- [ ] Social Icons / Social Icon Buttons

- [ ] Tab

- [ ] Table

- [x] Title

- [ ] Tooltip

# Supporters

[![Stargazers repo roster for muratoner/muratoner/semantic-ui-react-native](https://reporoster.com/stars/muratoner/semantic-ui-react-native)](https://github.com/muratoner/semantic-ui-react-native)