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

Create a new directory under src/stories/[ComponentName]
Add the component implementation in src/stories/[ComponentName]/src/[ComponentName].tsx
Create types in src/stories/[ComponentName]/src/[ComponentName].types.ts
Add an index.ts file that exports the component with the Ox prefix
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

包详细信息

@noxickon/debug_onyx

自述文件