Nexus Edge UI package

React components for Nexus Edge Design System (@neds)

📚 Description

This library was created for the Nexus Edge Design System and contains reusable React components. The components are carefully built and adhere to best practices for semantic HTML.

⌨️ Components

We provide 3 different components that are accessible tested and reusable. Additionally, we offer a collection of icons for use.

| Component | Description | Default | Options | | --------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------- | | Button | Our button is able to become an a tag if href attribute is passed to it | Button | Button or Anchor | | TextField | The TextField is a flexible component that can either be text input, email input, phone input, or Textarea based on the chosen variant | Textinput | TextInput, PhoneInput, EmailInput, or Textarea | | Badge | The Badge component visually indicates dynamic content, status, or information, with variants chosen by the 'variant' prop. | - | Variant: success, warning, error |

🛠️ Installation & Usage

To install our package run the following command in the terminal:

npm install @nexus-edge/ui

Import CSS

@import '@nexus-edge/ui/dist/index.css';

Import component

• Button & Anchor

import { Button } from '@nexus-edge/ui'

<Button variant="primary">Text</Button>

• TextField

import { TextField } from '@nexus-edge/ui'

<TextField label="label" variant="text"/>

• Badge

import { Badge } from '@nexus-edge/ui'

<Badge variant="success">I am successful</Badge>

• Icon

import { IconAlertCircle } from '@nexus-edge/ui'

 <IconAlertCircle title="title" />