Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gwjun/gwjun-ui
A headless design system that uses the emotion css library
https://github.com/gwjun/gwjun-ui
component design-system ui vanilla-extract
Last synced: about 1 month ago
JSON representation
A headless design system that uses the emotion css library
- Host: GitHub
- URL: https://github.com/gwjun/gwjun-ui
- Owner: GWjun
- Created: 2024-08-15T09:16:56.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-06T08:21:47.000Z (4 months ago)
- Last Synced: 2024-10-30T12:51:37.103Z (about 2 months ago)
- Topics: component, design-system, ui, vanilla-extract
- Language: TypeScript
- Homepage:
- Size: 252 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
GWjun UI
**A headless design system that uses the [emotion](https://github.com/emotion-js/emotion) css library.**
You can inject each component codes into your project, like [shadcn-ui](https://github.com/shadcn-ui/ui)
## Installation
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
/** tsconfig.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`.
## 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
- [Button](https://github.com/GWjun/gwjun-ui/tree/main/src/components/Button)
- [Input](https://github.com/GWjun/gwjun-ui/tree/main/src/components/Input)
- [Label](https://github.com/GWjun/gwjun-ui/tree/main/src/components/Label)