@coconut-beta/react

A modern, tree-shakeable React component library built with TailwindCSS v4.

Installation

npm install @coconut-beta/react
# or
yarn add @coconut-beta/react
# or
pnpm add @coconut-beta/react

Setup

Import the styles in your app entry point:

import "@coconut-beta/react/styles.css";

Usage

Barrel Import (Convenient)

import { Button, Input, Loading } from "@coconut-beta/react";

function App() {
  return (
    <Button variant="solid" color="primary">
      Click me
    </Button>
  );
}

Deep Import (Faster Dev Server)

For optimal dev server performance, use deep imports:

import { Button } from "@coconut-beta/react/button";
import { Input } from "@coconut-beta/react/input";

function App() {
  return <Button>Click me</Button>;
}

Components

| Component | Deep Import | | --------- | ----------------------------- | | Button | @coconut-beta/react/button | | Input | @coconut-beta/react/input | | Sidebar | @coconut-beta/react/sidebar | | Loading | @coconut-beta/react/loading | | Tooltip | @coconut-beta/react/tooltip |

Tree-Shaking

Both import patterns are fully tree-shakeable:

// ✅ Only Button code is bundled
import { Button } from "@coconut-beta/react";

// ✅ Also only Button code is bundled (faster parsing)
import { Button } from "@coconut-beta/react/button";

Requirements

• React 18+
• TailwindCSS 4+ (optional, for theming customization)

License

MIT