Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 107 additions & 41 deletions readme.MD
Original file line number Diff line number Diff line change
@@ -1,66 +1,132 @@
# React Blur Admin
All credit for the theme goes to [akveo](http://akveo.com/blur-admin/), this is just a React implementation.

Note: This is currently partial implementation of Blur Admin. This repo includes styles from Blur Admin that are required for pages and components to load correctly and the components themselves.
A **React implementation** of the popular [Blur Admin theme](http://akveo.com/blur-admin/) by [akveo](http://akveo.com/blur-admin/).
This project brings the Blur Admin design and UI components into the React ecosystem, making it easier to build modern admin dashboards.

Individual pages/demos/layouts can be found in the [React Webpack Skeleton repo](https://github.com/knledg/react-webpack-skeleton).
⚠️ **Note:** This is a **partial implementation** of Blur Admin. It includes core styles and essential components required for pages and layouts to load correctly.

### Build Status
👉 For individual pages, demos, and layouts, check out the [React Webpack Skeleton repo](https://github.com/knledg/react-webpack-skeleton).

---

## 📊 Build Status

[![CircleCI](https://circleci.com/gh/knledg/react-blur-admin/tree/master.svg?style=svg)](https://circleci.com/gh/knledg/react-blur-admin/tree/master)

### Currently Implemented
---

## 🚀 Installation & Quick Start

1. **Clone the repository**
```bash
git clone https://github.com/knledg/react-blur-admin.git
cd react-blur-admin
```

2. **Install dependencies**
```bash
npm install
```

3. **Run the development server**
```bash
npm start
```

4. **Build for production**
```bash
npm run build
```

---

## ✅ Features Implemented

- Text Inputs
- Buttons
- Editable Fields
- Loading Spinner
- Tables (basic tables only, not smart tables)
- Tabs
- Switches
- Select Dropdowns
- Progress Bars
- Panels
- Pages
- Textareas
- Pagination (with additional flexibility compared to Blur Admin’s original implementation)
- Notifications
- Alerts

---

## 🚧 Features Pending Implementation

- Accordions
- Sliders
- Searchable Table Columns
- Tag Inputs

- Text Inputs
- Buttons
- Editable Fields
- Loading Spinner
- Tables (not including smart tables)
- Tabs
- Switches
- Select Dropdowns
- Progress Bars
- Panels
- Pages
- Textareas
- Pagination (diverged from Blur's implementation slightly for additional flexibility)
- Notifications
- Alerts
---

### Needs Implementation
## 📦 Dependencies

- Accordions
- Sliders
- Searchable table columns
- Tags Inputs
This project relies on:

## Semver
- **Bootstrap CSS**
- **Bootstrap-Select CSS**
- **Bootstrap-Switch CSS**
- **Blur CSS**
- **Flexbox** for layout (rows/columns)
- **EventEmitter** (implemented in `lib/event-bus`) for global notifications without requiring a Flux implementation

Before the v1.0.0 release, a minor update will represent breaking changes and a patch will represent feature enhancements or bug fixes.
---

## Contributing
## 📖 Versioning (SemVer)

This is an active project and we'd love your help! Please submit small pull requests. You can make sure tests and lint passes by running `npm run lint && npm run test` before committing.
This project follows **Semantic Versioning (SemVer)**.

You can also add the `.git/hooks/pre-push` with the following:
- Before **v1.0.0**:
- **Minor updates** → may introduce breaking changes
- **Patch updates** → reserved for bug fixes or minor enhancements

---

## 👨‍💻 Contributing

We welcome contributions! 🚀

- Please keep pull requests **small and focused**.
- Ensure linting and tests pass before committing:

```bash
npm run lint && npm run test
```
#!/usr/bin/env bash

- To automate this check before pushing, you can add a `pre-push` Git hook:

```bash
#!/usr/bin/env bash
npm run lint && npm run test
```

And making it executable with `chmod ugo+x .git/hooks/pre-push`
Make it executable with:

```bash
chmod ugo+x .git/hooks/pre-push
```

---

## 📘 Example Usage

A sample **React Webpack Skeleton** implementing React Blur Admin’s layout and components will be linked soon.

## Example Usage
Meanwhile, you can explore the source code of demo pages in this repository to see how each component is used.

A React Webpack Skeleton implementing the layout for React Blur Admin and using it's components will be uploaded and linked shortly. You can see how each component is implemented by looking at the source code for each of the demo pages.
---

## Dependencies
- Bootstrap CSS
- Bootstrap-Select CSS
- Bootstrap-Switch CSS
- Blur CSS
- EventEmitter implemented in lib/event-bus so that notifications can listen for a new notification from anywhere without any specific implementation of flux
- Utilizes Flexbox for columns/rows
## 🙌 Credits

- Theme design: [akveo](http://akveo.com/blur-admin/)
- React implementation: [knledg](https://github.com/knledg)