Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nitdraig/cui-react
A simple component library for React/NextJS, using TailwindCSS
https://github.com/nitdraig/cui-react
components react tailwind ui
Last synced: 3 months ago
JSON representation
A simple component library for React/NextJS, using TailwindCSS
- Host: GitHub
- URL: https://github.com/nitdraig/cui-react
- Owner: nitdraig
- License: mit
- Created: 2024-07-07T01:26:07.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-12T02:14:08.000Z (5 months ago)
- Last Synced: 2024-09-30T10:01:21.428Z (3 months ago)
- Topics: components, react, tailwind, ui
- Language: TypeScript
- Homepage: https://c-ui.agustin.top
- Size: 6.74 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
IN DEVELOP
C-UI React | Docs & NPM Package | Component UI Library for React
Build Beautiful Interfaces with Ease
Explore CUI docs »
Report bug
·
Request feature
·
Creator Portfolio
# C-UI
[](https://www.npmjs.com/package/cui-react)
[](https://www.npmjs.com/package/cui-react)
## Introduction
C-UI is a component library built with Tailwind CSS and TypeScript for React and Next.js applications. It focuses on consistency, reusability, clarity, simplicity and adaptability to provide an excellent user and developer experience.
## Principles of design
1.**Consistency**: Maintain a consistent appearance and behavior across all components.
2.**Reuse**: Design components in a modular way to facilitate their reuse in different parts.
3.**Clarity and Simplicity**: Prioritize simplicity and clarity in design to improve understanding and usability.
4.**Adaptability**: Design components that can adapt to different devices and screen sizes.
5.**Accessibility**: Ensure all components are accessible per WCAG guidelines.
## Facility
### Previous requirements
- Node.js (>=12.x)
- npm or yarn
- React (>=17.x)
- Next.js (>=10.x)
## Installation
First, install the package using npm:
```bash
npm install cui-react
```
Second, add this to tailwind.config.ts
```bash
content: [
"./node_modules/cui-react/dist/**/*.{js,ts,jsx,tsx}",
],
```
Third, import in your React/Next project
```bash
import { Button } from "cui-react";
```
Fourth, Enjoy C-UI
## Contributions
Contributions are welcome! Please follow the steps below to contribute to the project.
### Clone the Repository
```bash
git clone https://github.com/nitdraig/cui-react.git
cd cui-react
```
### Installation of Dependencies
```bash
npm install
```
### Project Structure
```
└── 📁cui-react
└── .gitignore
└── CODE_OF_CONDUCT.md
└── 📁docs
└── .gitignore
└── next-env.d.ts
└── next.config.js
└── package-lock.json
└── package.json
└── 📁pages
└── 404.mdx
└── 📁docs
└── 📁Components
└── Accordion.mdx
└── Buttons.mdx
└── 📁Cards
└── Card.mdx
└── HoverCard.mdx
└── OverlayCard.mdx
└── GitHubStarsButton.mdx
└── Input.mdx
└── Progress.mdx
└── Select.mdx
└── Skeleton.mdx
└── Spinner.mdx
└── Switch.mdx
└── TypingEfect.mdx
└── index.mdx
└── index.mdx
└── index.module.css
└── _app.mdx
└── _meta.json
└── postcss.config.js
└── 📁public
└── github.svg
└── intro.mp4
└── logo.png
└── README.md
└── style.css
└── tailwind.config.js
└── theme.config.tsx
└── tsconfig.json
└── LICENSE
└── 📁npm
└── .gitignore
└── .npmignore
└── LICENSE
└── package-lock.json
└── package.json
└── postcss.config.js
└── README.md
└── 📁src
└── 📁components
└── 📁ui
└── 📁Accordion
└── Accordion.tsx
└── index.ts
└── 📁Button
└── Button.tsx
└── index.ts
└── 📁Card
└── Card.tsx
└── HoverCard.tsx
└── index.ts
└── OverlayCard.tsx
└── TextCard.tsx
└── 📁CircularProgress
└── CircularProgress.tsx
└── index.ts
└── 📁GitHubStarsButton
└── GitHubStarsButton.tsx
└── 📁Input
└── index.ts
└── Input.tsx
└── 📁Select
└── index.ts
└── Select.tsx
└── 📁Skeleton
└── index.ts
└── Skeleton.tsx
└── 📁Spinner
└── index.ts
└── Spinner.tsx
└── 📁Switch
└── index.ts
└── Switch.tsx
└── 📁TypingEffect
└── index.ts
└── TypingEffect.tsx
└── index.tsx
└── tailwind.config.js
└── tsconfig.json
└── README.md
```
## Contribution
Contributions are welcome! Please follow the steps below to contribute to the project.