https://github.com/ngduc/portable-react
Simple React components written in Typescript using Tailwind CSS, all in one index.tsx file ~ 200 lines of code.
https://github.com/ngduc/portable-react
Last synced: 9 months ago
JSON representation
Simple React components written in Typescript using Tailwind CSS, all in one index.tsx file ~ 200 lines of code.
- Host: GitHub
- URL: https://github.com/ngduc/portable-react
- Owner: ngduc
- Created: 2021-04-30T06:13:57.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-10-15T17:43:30.000Z (over 2 years ago)
- Last Synced: 2025-08-01T04:08:06.765Z (11 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.06 MB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# portable-react
Simple, lightweight React components written in Typescript using Tailwind CSS, all in one index.tsx file ~ 300 lines of code. No dependencies.
- [Live Playground](https://stackblitz.com/edit/portable-react-example?file=index.tsx)
- [Code Example](./portable-react/example/src/App.tsx)
- Components: Playground: Button, Dropdown, Accordion, Modal, Toast, Form Field, Spinner, Tooltip, ProgressBar, SearchInput and more. Work on responsive / mobile screens.
### Usage
- Just copy [index.tsx](./portable-react/src/index.tsx) file to your project to use it.
- Include tailwind.min.css in your index.html using: ``
### Motivation
This is Not Another Component Library, rather a set of building blocks, all in one file. You can jump in quickly, look at a few line of codes, tweak it, or do whatever you want, which is very useful for small projects.
> Oftentimes, when starting a new project, I need to quickly use some basic React components but I don't want to spend time to install, set up, import and RTFM to use a full-fledged Component Library yet. Inspired by PortableApps I used in the past (which you can just copy and use an application binary file anywhere), I created this collection of simple React components, all in one index.tsx file. You can just copy that file to any React project, tweak it and start using it immediately.
### Using npm
For those who want to use npm, install it by running: `npm install portable-react --save`
### Development
- See: [Development](docs/DEV.md)