design-ui

KO | EN

gitlite — search

#hacktoberfest #react #ai #typescript #llm #android #deep-learning #nodejs #java #awesome-list #pytorch #mcp #openai #open-source

(★ 8)

CSS-in-JS (styled-components, emotion and more...) starter design systems with react and docz

design-ui 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div style="text-align:center; display:grid; place-content:center;">
  <img src="https://i.ibb.co/KL5bxHs/design-ui-logo.png" style="margin:auto;height:250px;"/>
  <br>
  <h3>fully customizable design systems w/ styled-components and more...</h3>
</div>
<br>

## **Description**

**Design-UI** is a collection of starter templates built on top of `create-react-app v2+` to give you the ability to create a design system from scratch with:

- Different **CSS-in-JS** libraries (_`styled-components`, `emotion` etc._)
- `React v16.8+` ([ 📖 _docs_ ](https://reactjs.org/))
- `Docz` ([ 📖 _docs_ ](https://www.docz.site))

## 🚀 **Getting Started**

### Install the CLI Globally

```bash
npm install -g @design-ui/[library]
```

### Generate Your Design System

```bash
design-ui-[library] <project_name>
```

### Running Your Project

To get up and running with your design system:

```bash
# Install Your Dependencies
yarn

# Run Your Test Suite
yarn test

# Lint Your Styled Components
yarn lint:css

# Serve Your Documentation
yarn docs
```

<br />

## 💁🏾 **Styling Components**

You can use the design system components standalone or as wrappers for your React components that contain additional logic to separate concerns

### Basic Usage w/ Default Styles

```html
// Standalone
<DesignButton />

// Wrapper
<DesignButton>
  <ReactComponent />
</DesignButton>
```

### Custom Styling

```html
// Customizable Style Props
<DesignButton
  bg="rebeccapurple"
  bgActive="#6b41d2"
  color="#444"
  colorActive="#fff"
  br="5px"
/>
```

## 📃 **Documentation**

**Docz** ( _.mdx_ ) documentation files are represented in each component folder but can be rearranged to suit your desired project structure

You can customize documentation styling in the **doczrc.js** file at the root of the default project

## ✏️ **Testing**

The template comes with out-of-the-box testing with `jest` for your React components (_included with `create-react-app`_) and testing compatible with your specific CSS-in-JS library

<br />

## **Contributors**

### Built with 💖 by this human:

[<img src="https://avatars3.githubusercontent.com/u/10368585?s=460&v=4" alt="Jazz Lyles" width="75px;" style="border-radius:50%;" />](https:/jazz-lyles.com/)<br />
[✉️](mailto:ripley36706@gmail.com)

## **License**

Licensed under MIT

design-ui

design-ui 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

design-ui

design-ui 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README