https://github.com/gwjun/gwjun-ui
Re-useable components that uses the vanilla-extract css library.
https://github.com/gwjun/gwjun-ui
component ui vanilla-extract
Last synced: 3 months ago
JSON representation
Re-useable components that uses the vanilla-extract css library.
- Host: GitHub
- URL: https://github.com/gwjun/gwjun-ui
- Owner: GWjun
- License: mit
- Created: 2024-08-15T09:16:56.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-12-12T06:51:34.000Z (7 months ago)
- Last Synced: 2025-03-25T23:15:19.819Z (3 months ago)
- Topics: component, ui, vanilla-extract
- Language: TypeScript
- Homepage: https://bit.ly/4ivJwMm
- Size: 489 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
GWjun UI
**Collection of re-useable components that uses the [vanilla-extract](https://github.com/vanilla-extract-css) css library.**
This project is inspired by [shadcn-ui](https://github.com/shadcn-ui/ui) and [radix-ui](https://github.com/radix-ui/primitives).
You can **inject** each component **codes** into your project, like **shadcn-ui**
You can explore the **Storybook** docs for the deployed components [here](https://6757cbfcde245d5595fbd83a-ycfpsyzsfp.chromatic.com/).
## Installation
> If you have not set up a React project, please follow the instructions in the [Getting Started Guide](/packages/cli/docs/getting-started-guide.md).
>
> If you have already set up a React project, please proceed with the following steps.
### Add tsconfig alias
Add baseUrl and alias in your `tsconfig.json` to correctly configure the import paths for utility functions.
If you configured differently, you must input the alias according to the corresponding path when running `init`.
```json
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"#*": ["./src/*"]
}
}
}
```
> **Note**
> If you are using other frameworks or build tool such as `Vite`, additional steps may be required to configure `alias`.
>
> Please refer to the documentation in the [Getting Started Guide](/packages/cli/docs/getting-started-guide.md) for detailed instructions.
## Usage
### init
Use the `init` command to initialize dependencies for a new project.
The `init` command sets up the component-config.json file, which makes configuration settings.
```bash
npx gwjun-ui init
```
### add
Use the `add` command to add components to your project.
The `add` command adds a component to your project and installs all required dependencies.
```bash
npx gwjun-ui add [component]
```
#### Example
```bash
npx gwjun-ui add button
```
## Components
- [Avatar](src/components/Avatar)
- [Button](src/components/Button)
- [Input](src/components/Input)
- [Label](src/components/Label)
- [Menu](src/components/Menu)
- [MenuItem](src/components/MenuItem)
- [Modal](src/components/Modal)
- [Skeleton](src/components/Skeleton)
- [Toast](src/components/Toast)
## References
This project references code and concepts from [shadcn-ui](https://github.com/shadcn-ui/ui) and [radix-ui](https://github.com/radix-ui/primitives).
Components are styled using the [vanilla-extract](https://github.com/vanilla-extract-css).
## License
Licensed under the MIT License, Copyright (c) 2024 Gwang Jun
See [LICENSE](LICENSE) for more information.