https://github.com/ali-nuri/vite-tailwind-library
NPM package for UI library supercharged by TailwindCSS built by Vite(react-ts) Library mode!
https://github.com/ali-nuri/vite-tailwind-library
npm react storybook tailwindcss typescript vite-library-mode
Last synced: about 1 month ago
JSON representation
NPM package for UI library supercharged by TailwindCSS built by Vite(react-ts) Library mode!
- Host: GitHub
- URL: https://github.com/ali-nuri/vite-tailwind-library
- Owner: ali-nuri
- License: mit
- Created: 2023-11-24T14:17:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-28T14:57:07.000Z (over 1 year ago)
- Last Synced: 2025-03-24T02:37:22.276Z (about 2 months ago)
- Topics: npm, react, storybook, tailwindcss, typescript, vite-library-mode
- Language: TypeScript
- Homepage: https://nuri.gg/vite-react-typescript-tailwind-npm-package
- Size: 136 KB
- Stars: 17
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# โก๏ธ Vite, React, Typescript and Tailwind npm package
This library is a template for building UI library npm package with **Vite Library mode** and supercharged with Tailwind CSS.
Please check this ๐ [blog post](https://nuri.gg/vite-react-typescript-tailwind-npm-package) ๐ for a step by step walkthrough on how this library is built.
The components are located in the `lib` folder.
*If you want to showcase a component in Storybook, you can add a story file next to the component. see the example component*
## ไทด Developing components
To develop the components, follow these steps:
1. Write your component code in the `lib` folder.
2. Export the component in the `lib/main.ts` file.
3. Create a corresponding story file next to the component to showcase it in Storybook.
4. Run `npm run storybook` to view your developed component live on the Storybook viewer.
## ๐ Publish
### To publish the package on Gitlab Package Registry, follow these steps:
1. Modify the name and version in the `package.json` file according to this pattern: `@your-scope/package-name`.
2. Generate a developer token from your GitLab account. This token will be needed in step 6.
3. Create a repository on GitLab for your library.
4. Add an `.npmrc` file at the root of this package with the following content:
```
@your-scope:registry=https://gitlab.com/api/v4/projects/your_project_id/packages/npm/
//gitlab.com/api/v4/projects/your_project_id/packages/npm/:_authToken="${NPM_TOKEN}"
```
Replace `your_project_id` with the Project ID that can be found in the GitLab repository.
5. Run the command `NPM_TOKEN=token npm publish` to publish the package to the npm registry.
### To publish the package on Github Package Registry, follow these steps:
To publish the package on GitHub Package Registry, follow these steps:
1. Modify the name and version in the `package.json` file according to this pattern: `@your-scope/package-name`.
2. Create a personal access token (PAT) with the `write:packages` scope. You can create a PAT by going to your GitHub account settings and navigating to "Developer settings" > "Personal access tokens".
3. Create a `.npmrc` file at the root of this package with the following content:
```
@NAMESPACE:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_PAT
```
Replace `NAMESPACE` with your GitHub username and `YOUR_PAT` with your personal access token.
4. login to npm on scope level via
```
$ npm login --scope=@NAMESPACE --auth-type=legacy --registry=https://npm.pkg.github.com
> Username: USERNAME
> Password: TOKEN
```
5. Run the command `npm publish` to publish the package to the GitHub Package Registry.
## โ๏ธ Installing the package
*The library does not bundle the Tailwind CSS library, Therefore, you need to configure Tailwind CSS on your project to use this component library
For more information, refer to the [Tailwind CSS installation guide](https://tailwindcss.com/docs/installation/framework-guides).*
To use the UI Library in your project, follow these steps:
1. Provide the `.npmrc` file with the following credentials on the target repository.
2. Clone the released package on the target repository using the command `npm i @your-scope/ui-kit`.
3. Configure Tailwind to scan the library components by adding this line to the content array on the `tailwind.config.js`.
```
content: [
...
'./node_modules/@your-scope/ui-kit/dist/ui-kit.umd.js',
],
```
4. Import the library in your component, for example: `import {Button} from '@scope/ui-kit'`.
5. Use the component: ` Click me! `.