yearn-ui

React component library. Published to npm.

Installation

npm install @noey-17/yearn-ui

Setup

1. Import the stylesheet

Add this once in your app entry point (e.g. main.jsx):

import '@noey-17/yearn-ui/style.css'

This provides Tailwind's base styles and all pre-built utility classes used by the components. Without it, components will render unstyled.

2. Import the theme (optional)

If you want to use the design tokens in your own components:

import '@noey-17/yearn-ui/theme.css'

This exposes CSS variables like --color-bg-primary, --color-border-brand, --font-body, etc.

The stylesheet already includes the theme internally — this import is only needed if you want to reference the tokens in your own CSS.

Usage

import { Button, Input, Select, Modal } from '@noey-17/yearn-ui'

export function Example() {
  return (
    <Button variant="primary" onClick={() => alert('Hello')}>
      Get started
    </Button>
  )
}

Components

| Component | Description | |-----------|-------------| | Button | Primary, secondary, tertiary, destructive, and link variants | | Input | Text input with label, hint, error, and icon support | | Select | Single-value dropdown with search and supporting text | | MultiSelect | Multi-value dropdown with checkboxes, search, and bulk actions | | Menu | Dropdown menu container | | MenuItem | Individual menu option with optional check state | | DropdownMenuItem | Menu item styled for dropdown context | | Modal | Dialog overlay with header, body, and footer slots | | Spinner | Loading indicator | | cx | Utility for conditional class merging (re-exported from tailwind-merge) |

Peer Dependencies

{
  "react": ">=19",
  "react-dom": ">=19",
  "tailwindcss": ">=4"
}

Tailwind is required as a peer dependency. The components use design token class names (e.g. bg-bg-primary) that resolve against the bundled theme variables.