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: about 2 months 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 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-24T16:00:12.000Z (about 2 months ago)
• Last Synced: 2024-07-24T18:28:55.028Z (about 2 months 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: 0
• 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

![Alt](https://repobeats.axiom.co/api/embed/598e41bfc615ece01d4f2e4c881fe52c54e6d8a9.svg 'Repobeats analytics image')

## Development

Use StackBlitz

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/valcosmos/val-design)

clone locally:

```bash

git clone [email protected]: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).