https://github.com/conductionnl/nl-design-system

https://github.com/conductionnl/nl-design-system

Last synced: 17 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/conductionnl/nl-design-system
• Owner: ConductionNL
• Created: 2021-11-25T12:12:18.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-03-16T11:15:21.000Z (almost 3 years ago)
• Last Synced: 2024-06-10T11:31:34.179Z (7 months ago)
• Language: TypeScript
• Size: 8.91 MB
• Stars: 0
• Watchers: 5
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# NL-Design-System

This [NL-Design-system](https://designsystem.gebruikercentraal.nl/) repository is a customizable and straightforward component library to help make Progressive Web Applications faster, attractive, and more accessible with React.

The main benefits of working with a standardised, component library is being able to develop faster with pre-built components and compliance with the NL Design System as a whole.

## Installation

NL-Design-System is available as an NPM package.

```

// with npm

$ npm install @conductionnl/nl-design-system

// with yarn

$ yarn add @conductionnl/nl-design-system

```

# Usage

Here's a quick example to get you started, _it's all you need_

```JS

import  *  as  React  from  "react";

// Import the InfoTooltip Component

Import { InfoTooltip } from "@conductionnl/nl-design-system"

// Render the component in your app

const App = () => {

	render (

		<>

			InfoTooltip  content={<>Pass any JSX.Element here>} placement={"bottom"} />

		>

	)

}

```

## Examples

Take a look at our [NL Design Skeleton App](https://conductionnl.github.io/nl-design-skeleton-gatsby/) and the [Skeleton App](https://github.com/ConductionNL/nl-design-skeleton-gatsby) repo. Additional components can be implemented like the code snippet above.

## Roadmap

A more advanced documentation is to be released in the near future. More examples and Tutorials are coming up!