pines-ui-react

A React 19 port of Pines UI by DevDojo — the Alpine JS + Tailwind CSS UI library — rebuilt as pure .tsx + .scss components. No Alpine, no Tailwind, no runtime dependencies beyond React.

• Every component lives in a single PinesUI<Name>.tsx file with a matching PinesUI<Name>.scss, faithfully translating the original Tailwind styling into SCSS.
• Layout/positioning classes from the original demos (margins, fixed positioning, demo widths) are not baked into the components — pass your own className/style to position them.
• Composition follows JSX conventions: text goes in children, nested structures use subcomponents (<DropdownMenu><DropdownMenuItem>…).

See COMPONENTS.md for the full usage reference of every component, and CHANGELOG.md for release notes.

Install

npm install pines-ui-react

Usage

import { Button, Tooltip } from 'pines-ui-react';
import 'pines-ui-react/styles.css'; // once, e.g. in your entry file

export function Example() {
  return (
    <Tooltip text="Hello!" position="top">
      <Button>Click me</Button>
    </Tooltip>
  );
}

Demo

The repo ships a docs-style demo page showing every component with adjustable knobs:

npm install
npm run dev      # demo at http://localhost:5173

Build the package

npm run build    # emits dist/ (ESM + CJS + d.ts + pines-ui-react.css)

To use it in another project before publishing: npm pack here, then npm install ../pines-ui-react/pines-ui-react-0.1.0.tgz — or npm link.

Components

Accordion, Alert, Badge, Banner, Breadcrumbs, Button, Card, Checkbox, Command, Context Menu, Copy to Clipboard, Date Picker, Dropdown Menu, Full Screen Modal, Hover Card, Image Gallery, Marquee, Menubar, Modal, Monaco Editor, Navigation Menu, Pagination, Popover, Progress, Quote, Radio Group, Range Slider, Rating, Retro Grid, Select (optionally searchable), Slide Over, Switch, Table, Tabs, Text Animation, Text Input, Textarea, Toast, Tooltip, Typing Effect, Video.

Note: Monaco Editor loads the editor runtime from the cdnjs CDN at runtime, so it needs network access; everything else is fully self-contained.

License

MIT — original design and styles by DevDojo's Pines UI (MIT). See LICENSE.md.