@neoaxis/nectar-react

React component library for the Nectar Design System.

Built on Radix UI primitives with full accessibility support and design tokens from @neoaxis/nectar-tokens.

Installation

npm install @neoaxis/nectar-react

Setup

Import the stylesheet and wrap your application with NectarProvider:

import "@neoaxis/nectar-react/style.css"
import { NectarProvider } from "@neoaxis/nectar-react"

function App() {
  return <NectarProvider>{/* your app */}</NectarProvider>
}

Components

| Category | Components | | -------------- | -------------------------------------------------------------------------- | | Actions | Button | | Feedback | Progress | | Form | Form, FormFieldText, FormFieldSelect, FormFieldSwitch, FormGroup | | Layout | List, SidebarAccordion, Toolbar | | Overlay | ContextMenu, Popover, Tooltip | | Primitives | Heading, Text, Icon, Hotkey, SectionTitle |

Usage example

import { Button, Tooltip } from "@neoaxis/nectar-react"

function Example() {
  return (
    <Tooltip content="Save changes">
      <Button>Save</Button>
    </Tooltip>
  )
}

Peer dependencies

| Package | Version | | ----------- | ------- | | react | 19.x | | react-dom | 19.x |

Development

# Component explorer (Ladle)
yarn dev

# Build library
yarn build

# Unit tests
yarn test

# Unit tests with coverage
yarn test:coverage

# End-to-end tests (Playwright)
yarn test:e2e