@nexus-edge/ui

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" />