https://github.com/ultrasonicdevs/simplify-dev
Simple react design system
https://github.com/ultrasonicdevs/simplify-dev
hook react ui ui-component ui-kit
Last synced: 3 months ago
JSON representation
Simple react design system
- Host: GitHub
- URL: https://github.com/ultrasonicdevs/simplify-dev
- Owner: ultrasonicdevs
- License: mit
- Created: 2023-07-24T15:13:31.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2025-11-15T12:00:45.000Z (7 months ago)
- Last Synced: 2025-11-15T12:03:13.475Z (7 months ago)
- Topics: hook, react, ui, ui-component, ui-kit
- Language: TypeScript
- Homepage:
- Size: 3.03 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Simplify-dev
---
## About package:
React library for speeding up creation of interfaces.
It includes UI components stylized with [tailwindcss](https://tailwindcss.com/) and a set of some commonly used hooks. The main feature of the project is the changeability of library styles out of the box. Styles are applied to components directly in your project using preset and plugin with prepared default values and utilities that can be changed in tailwind configuration file.
---
## [Read documentation](https://github.com/ultrasonicdevs/simplify-dev/wiki)
## Quick start:
### 1. Init your project
_As example used vite react app_
```bash
npm create vite@latest my-app --template react-ts
```
### 2. Install packages and init config files:
Install simplify-dev, tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files.
```bash
npm i simplify-dev
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
### 3. Setup configuration
#### Configure your tailwind.config.js:
Add the paths to all of your template files in your tailwind.config.js file.
```js
import { simplifyDefaultsPlugin, simplifyUtilitiesPreset } from 'simplify-dev';
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}',
'./node_modules/simplify-dev/*', // styling simplify-dev components
],
theme: {
extend: {
// your configuration
},
},
plugins: [simplifyDefaultsPlugin],
presets: [simplifyUtilitiesPreset],
};
```
You can see that we add simplify-dev files to tailwindcss content. This is done to simplify the customization of components via tailwind.config.js
### 4. Add the Tailwind directives to your CSS
Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### 5. Start your build process
Run your build process with npm run dev.
```bash
npm run dev
```
### 6. Start using simplify-dev in your project
**Example:**
```js
export default function App() {
const [count, setCount] = useState(0);
return (
Project with simplify-dev
setCount((count) => count + 1)}>
count is {count}
Edit src/App.tsx and save to test HMR
Click on the Vite and React logos to learn more
);
}
```