https://github.com/valcosmos/val-design
✨ A simple, lightweight UI component library for React.
https://github.com/valcosmos/val-design
components css html javascript react sass storybook typescript ui ui-components
Last synced: over 1 year ago
JSON representation
✨ A simple, lightweight UI component library for React.
- Host: GitHub
- URL: https://github.com/valcosmos/val-design
- Owner: valcosmos
- License: mit
- Created: 2022-03-26T04:05:33.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-24T16:00:12.000Z (almost 2 years ago)
- Last Synced: 2025-04-12T06:12:55.642Z (over 1 year ago)
- Topics: components, css, html, javascript, react, sass, storybook, typescript, ui, ui-components
- Language: TypeScript
- Homepage: https://valcosmos.github.io/val-design
- Size: 90 MB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Welcome to val-design
val-design is a simple, lightweight React UI component library.
## Description
val-design is a simple component library, built with [React.js](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/), mainly for learning, or you can optimize or encapsulate it for production use. If you have any issues, or better suggestions, welcome to put them in the [issues](https://github.com/valcosmos/val-design/issues) or [discussion](https://github.com/valcosmos/val-design/discussions), and I will be very grateful.
## Features
- ✨ A personal `React component library`, welcome to submit [issues](https://github.com/valcosmos/val-design/issues) or [ideas](https://github.com/valcosmos/val-design/discussions).
- 🔭 Built with `Vite` `TypeScript` and `React Hooks`.
- 😄 Use `storybook` for local debugging and auto-generate component library documentation.
- 😉 Automatically generate documentation content from comments using `react-doc-gen`.
- ⭐️ Some components are completed by Other component libraries, and `Icon` components are secondary encapsulated using `react-fontawesome`.
- 🌔 Integrate CI/CD, use CircleCI + Github Page to deploy documents.
- 🌱 Added support for `React v18`.
## Getting started
- To check out the [guide](https://valcosmos.github.io/val-design), visit [https://valcosmos.github.io/val-design](https://valcosmos.github.io/val-design). 📚
- To check out the [example](https://stackblitz.com/edit/vitejs-vite-jvn7fm), visit [https://stackblitz.com/edit/vitejs-vite-jvn7fm](https://stackblitz.com/edit/vitejs-vite-jvn7fm). 📚
## Install
```bash
npm i val-design
```
```bash
yarn add val-design
```
## Usage
And import style manually：
```jsx
import 'val-design/dist/index.css'
```
And import button：
```jsx
import { Button } from 'val-design'
function App() {
return (
<>
val design
>
)
}
```
## Project Activity
## Development
Use StackBlitz
[](https://stackblitz.com/github/valcosmos/val-design)
clone locally:
```bash
git clone git@github.com:valcosmos/val-design.git
cd val-design
pnpm install --shamefully-hoist
pnpm storybook
```
Open your browser and visit http://localhost:6006
## Issues
You can write down any issues you have under this [link](https://github.com/valcosmos/val-design/issues).
## License
val-design is [MIT licensed](LICENSE).