Onyx Component Library

Onyx is a modern React component library built with Tailwind CSS, designed for building beautiful and accessible UI interfaces. The library offers a collection of reusable components following consistent design patterns, optimized for dark mode by default.

Features

• Modern React Components - Built with React 19 and TypeScript
• Dark Mode Optimized - All components designed for dark interfaces
• Material Design Icons - Seamless integration with MDI icon set
• Tailwind CSS - Fully customizable with Tailwind 4
• Storybook Documentation - Interactive component documentation

Getting Started

Installation

npm install @noxickon/onyx

Usage

import { OxButton, OxIcon } from '@noxickon/onyx';

function App() {
  return (
    <div>
      <OxButton variant="primary">Click Me</OxButton>
      <OxIcon icon="mdiHomeOutline" size={1.2} />
    </div>
  );
}

Development

Available Commands

| Command | Description | | ------------------------- | ------------------------------------------------ | | npm run dev | Starts Storybook development server on port 6006 | | npm run build | Builds the component library for production | | npm run preview | Previews the built package locally | | npm run build-storybook | Builds static Storybook site for deployment | | npm run lint | Lint code with ESLint |

Storybook

The component library uses Storybook for development and documentation. To start the Storybook development server:

npm run dev

Then open http://localhost:6006 in your browser to view the component library.

Adding a New Component

1. Create a new directory under src/stories/[ComponentName]
2. Add the component implementation in src/stories/[ComponentName]/src/[ComponentName].tsx
3. Create types in src/stories/[ComponentName]/src/[ComponentName].types.ts
4. Add an index.ts file that exports the component with the Ox prefix
5. Create stories in src/stories/[ComponentName]/[ComponentName].stories.tsx

License

This project is privately owned and not available for public use without permission.

Contributors

• Noxickon