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 and TypeScript, 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 or discussion, and I will be very grateful.

Features

• ✨ A personal React component library, welcome to submit issues or ideas.
• 🔭 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, visit https://valcosmos.github.io/val-design. 📚

• To check out the example, visit https://stackblitz.com/edit/vitejs-vite-jvn7fm. 📚

Install

npm i val-design

yarn add val-design

Usage

And import style manually：

import 'val-design/dist/index.css'

And import button：

import { Button } from 'val-design'

function App() {
  return (
    <>
      <Button type="primary" size="lg">
        val design
      </Button>
    </>
  )
}

Project Activity

Development

Use StackBlitz

clone locally:

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.

License

val-design is MIT licensed.