open-index/open-npm huggingface dataset:
npm package: @rasenganjs/image
Description: Image component provided by RasenganJS to display images with ease
Author: dilane3
Latest version: 1.1.3

# Rasengan Image

[![npm version](https://badge.fury.io/js/@rasenganjs%2Fimage.svg)](https://badge.fury.io/js/@rasenganjs%2Fimage)
![NPM Downloads](https://img.shields.io/npm/dm/%40rasenganjs%2Fimage)
[![GitHub license](https://img.shields.io/github/license/rasengan-dev/rasengan-image)](https://github.com/rasengan-dev/rasengan-image/blob/main/LICENSE)

An utility component for Image which offers a lazy loading behavior with a previewing animation for enhancing UX

Images are loading when they are in the viewport by default, and a previewing animation is displayed while the image is loading. But you can change that behavior as you want.

## Installation

You can install the `@rasenganjs/image` package using the following command:

```bash
npm install @rasenganjs/image
```

or

```bash
yarn add @rasenganjs/image
```

## Usage

Here is an example of how you can use the `@rasenganjs/image` package:

### Basic Usage

```tsx
import Image from '@rasenganjs/image';
import logo from './logo.svg';

const App = () => {
  return <Image src={logo} alt="Image" width={400} height={300} />;
};
```

### With `URI`

```tsx
import Image from '@rasenganjs/image';

const App = () => {
  return (
    <Image
      src={{ uri: 'https://example.com/image.jpg' }}
      alt="Image"
      width={400}
      height={300}
    />
  );
};
```

Learn more on the [Documentation](https://rasengan.dev/docs/core/optimizing/images) website.

## Community

The Rasengan.js community can be found on [GitHub Discussions](https://github.com/rasengan-dev/rasenganjs/discussions) where you can ask questions, voice ideas, and share your projects with other people.

We also have a [Twitter](https://twitter.com/rasenganjs) account where you can follow us to get the latest news about Rasengan.js.

## License

Rasengan.js is [MIT licensed](https://github.com/rasengan-dev/rasengan-image/blob/main/LICENSE).

## Authors

Here is the authors list:

- Dilane Kombou ([**@dilanekombou**](https://twitter.com/dilanekombou))
npm package: @rasenganjs/kurama
Description: Kurama is a lightweight state management library for Rasengan
Latest version: 1.0.1

# 🦊 @rasenganjs/kurama

### The Nine-Tails of State Management — Control Your Chakra, Control Your State.

`@rasenganjs/kurama` is a **lightweight and reactive state management library** designed for **Rasengan.js** and **any React application**.
Inspired by **Zustand**, **Jotai**, and the raw energy of **Kurama**, it gives developers full control over their application’s chakra (state) — simple, fast, and scalable.

---

## ⚡️ Features

- 🌀 **Minimal API** – Simple store creation, no boilerplate.
- 💫 **Reactive Selectors** – Subscribe to specific slices for performance.
- 🧠 **Type-safe by Design** – Written in TypeScript, fully inferred.
- 🔁 **Persistent Stores** – Save state to `localStorage` or custom drivers.
- 🔒 **SSR + Hydration** – Works seamlessly with Rasengan.js server rendering.
- ⚙️ **Middleware System** – Extend store behavior (logger, persist, devtools, etc.).
- 🧩 **Framework Agnostic** – Works in Rasengan.js, Next.js, Remix, React Router & more.

---

## 🚀 Installation

```bash
pnpm add @rasenganjs/kurama
```

or

```bash
npm install @rasenganjs/kurama
```

---

## 🦾 Quick Start

```tsx
import { createStore } from '@rasenganjs/kurama';

type CounterState = {
  count: number;
  increment: () => void;
  decrement: () => void;
};

export const useCounter = createStore<CounterState>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

// Use it anywhere
function Counter() {
  const { count, increment, decrement } = useCounter();
  return (
    <>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      Chakra Power: {count}
    </>
  );
}
```

---

## 💾 Persistent Store Example

```tsx
import { middleware, createStore } from '@rasenganjs/kurama';

export type ThemeState = {
  mode: 'light' | 'dark';
  toggle: () => void;
};

export const useTheme = createStore<ThemeState>(
  middleware.persist({ name: 'theme', storage: 'session' })((set) => ({
    mode: 'light',
    toggle: () => set((s) => ({ mode: s.mode === 'light' ? 'dark' : 'light' })),
  }))
);
```

---

## ⚙️ Middleware Example

```tsx
import { createStore, middleware } from '@rasenganjs/kurama';

export const useStore = createStore(
  middleware.logger((set) => ({
    chakra: 100,
    decrease: () => set((s) => ({ chakra: s.chakra - 10 })),
  }))
);
```

---

## 🔮 Roadmap

- [x] Middleware composition
- [ ] DevTools integration (Kurama Vision)
- [ ] Store dependency tracking
- [ ] Multi-tab state synchronization
- [ ] Asynchronous action queue
- [ ] Integration with `@rasenganjs/query`

---

## 🧠 Philosophy

> “Kurama represents raw, limitless chakra.
> In Rasengan.js, that chakra is your **state** — energy you can control, share, and master.”

Simple. Reactive. Controlled.
That’s the power of Kurama.

---

## 📄 License

Licensed under the **MIT License**.
Part of the **Rasengan.js ecosystem** ⚡
npm package: @rasenganjs/mdx
Description: RasenganJS plugin for MDX support
Author: dilane3
Latest version: 1.2.1

# Rasengan MDX Plugin

[![npm version](https://badge.fury.io/js/@rasenganjs%2Fmdx.svg)](https://badge.fury.io/js/@rasenganjs%2Fmdx)
![NPM Downloads](https://img.shields.io/npm/dm/%40rasenganjs%2Fmdx)
[![GitHub license](https://img.shields.io/github/license/rasengan-dev/rasengan-mdx-plugin)](https://github.com/rasengan-dev/rasengan-mdx-plugin/blob/main/LICENSE)

MDX plugin for Rasengan.Js

## Installation

You can install the `@rasenganjs/mdx` package using the following command:

```bash
npm install @rasenganjs/mdx
```

or

```bash
yarn add @rasenganjs/mdx
```

## Usage

Here is an example of how you can use the `@rasenganjs/mdx` package:

### Basic Usage

1. Setup the `rasengan.config.js` file

Import the `mdx` plugin into the `rasengan.config.js` file.

```javascript
import { defineConfig } from 'rasengan';
import mdx from '@rasenganjs/mdx';

export default defineConfig({
  vite: {
    plugins: [mdx()],
  },
});
```

2. Create your `markdown` file.

Create a `markdown` file inside the `app` folder with the pattern `[name].page.mdx` or `[name].page.md`

```mdx
---
path: /blog
metadata:
  title: Blog page
  description: Discover our new blog posts
---

import Button from '@/components/common/Button';

# Blog page

This is a `blog` page.

<Button>Click Me</Button>
```

3. Use your `markdown` file.

Inside the `app.router.ts` file, import your Markdown Component and the `MDXRenderer` component from `@rasenganjs/mdx` and add it to `defineRouter` option like this:

```typescript
import { RouterComponent, defineRouter } from 'rasengan';
import AppLayout from '@app/app.layout';
import Blog from '@app/blog.page.mdx';
import { MDXRenderer } from '@rasenganjs/mdx';

class AppRouter extends RouterComponent {}

export default defineRouter({
  imports: [],
  layout: AppLayout,
  pages: [Blog],
  MDXRenderer,
})(AppRouter);
```

The `MDXRenderer` component is used to render the Markdown content.

4. Load the `css` file from `@rasenganjs/mdx` package into your `main.ts` file.

```typescript
import "@rasenganjs/mdx/styles/rasengan-mdx.min.css";
import { type AppProps } from "rasengan";
import AppRouter from "@/app/app.router";

export default function App({ children, Component }: AppProps) {
	return <Component router={AppRouter}>{children}</Component>;
}
```

Now visit [http://localhost:5320/blog](http://localhost:5320/blog)

## Community

The Rasengan.js community can be found on [GitHub Discussions](https://github.com/rasengan-dev/rasenganjs/discussions) where you can ask questions, voice ideas, and share your projects with other people.

We also have a [Twitter](https://twitter.com/rasenganjs) account where you can follow us to get the latest news about Rasengan.js.

## License

[MIT licensed](https://github.com/rasengan-dev/rasengan-image/blob/main/LICENSE).

## Authors

Here is the authors list:

- Dilane Kombou ([**@dilanekombou**](https://twitter.com/dilanekombou))
npm package: @rasenganjs/serve
Description: Production application server for Rasengan
Latest version: 1.2.1

# Rasengan Serve

[![npm version](https://badge.fury.io/js/@rasenganjs%2Fserve.svg)](https://badge.fury.io/js/@rasenganjs%2Fserve)
![NPM Downloads](https://img.shields.io/npm/dm/%40rasenganjs%2Fserve)
[![GitHub license](https://img.shields.io/github/license/rasengan-dev/rasengan-serve)](https://github.com/rasengan-dev/rasengan-serve/blob/main/LICENSE)

`@rasenganjs/serve` is a simple utility to launch your Rasengan.js application in production mode. It serves the built application from the `dist` directory, ensuring a smooth and optimized deployment.

## Installation

To use `@rasenganjs/serve`, install it as a dependency in your project:

```bash title="Terminal"
npm install @rasenganjs/serve
```

## Usage

After building your application with Rasengan.js, you can start the production server using the `rasengan-serve` command.

### Start the production server

#### Define the serve command

```json title="package.json"
{
  "scripts": {
    "serve": "rasengan-serve ./dist"
  }
}
```

#### Run the serve command

```bash title="Terminal"
npm run serve
```

This will start a server that serves your application from the `dist` folder.

### Options

Currently, `@rasenganjs/serve` provides a default configuration for serving your built project. Future updates may include additional options for customization.

#### Custom port

You can specify a custom port for the server by using the `--p` or `--port` option:

```bash title="Terminal"
npm run serve -- -p 3000
```

or

```bash title="Terminal"
pnpm run serve -p 3000
```

The `-p` option stands for `port`, and allow you to specify a custom port for the server by replacing the default port `4320` for production server.

Learn more on the [Documentation](https://rasengan.dev/docs/core/optimizing/images) website.

## Community

The Rasengan.js community can be found on [GitHub Discussions](https://github.com/rasengan-dev/rasenganjs/discussions) where you can ask questions, voice ideas, and share your projects with other people.

We also have a [Twitter](https://twitter.com/rasenganjs) account where you can follow us to get the latest news about Rasengan.js.

## License

Rasengan.js is [MIT licensed](https://github.com/rasengan-dev/rasengan-serve/blob/main/LICENSE).

## Authors

Here is the authors list:

- Dilane Kombou ([**@dilanekombou**](https://twitter.com/dilanekombou))
npm package: @rasenganjs/shuriken
Description: The Shuriken CLI is a tool to automate basic development tasks like generating pages, routers, layouts or resources and cloning templates.
Author: dilane3
Latest version: 1.0.1

# Create Rasengan

[![npm version](https://badge.fury.io/js/create-rasengan.svg)](https://badge.fury.io/js/create-rasengan)
[![npm downloads](https://img.shields.io/npm/dm/create-rasengan)](https://www.npmjs.com/package/create-rasengan)
[![GitHub license](https://img.shields.io/github/license/rasengan-dev/rasenganjs)](https://github.com/rasengan-dev/create-rasengan/blob/main/LICENSE)

The easiest way to create a new Rasengan.js project is to use the `create-rasengan` package. It will set up a new Rasengan.js project with a single command.

## Documentation

To create a new Rasengan.js project, you have to execute one of these command, and the Create Rasengan CLI will help you generating your project based on your configuration

### With `NPX`

```bash
npx create-rasengan@latest
```

### With `NPM`

```bash
npm create rasengan
```

### With `YARN`

```bash
yarn create rasengan
```

### With `PNPM`

```bash
pnpm create rasengan
```

Then you will see the following prompts:

```txt
You are using Create Rasengan CLI 🎉

? Enter the project name: my-app
? Select a language: typescript
? Select a template: blank
```

Visit [https://rasengan.dev/docs/api-reference/create-rasengan](https://rasengan.dev/docs/api-reference/create-rasengan) to view the full documentation.

## Community

The Rasengan.js community can be found on [GitHub Discussions](https://github.com/rasengan-dev/rasenganjs/discussions) where you can ask questions, voice ideas, and share your projects with other people.

We also have a [Twitter](https://twitter.com/rasenganjs) account where you can follow us to get the latest news about Rasengan.js.

## License

Rasengan.js is [MIT licensed](https://github.com/rasengan-dev/create-rasengan/blob/main/LICENSE).

## Contributing

We are open to all contributions. If you want to contribute to Rasengan.js, especially to the CLI, please read the [Contributing Guide](https://github.com/rasengan-dev/rasenganjs/blob/main/CONTRIBUTING.md) to get started.

## Authors

Here are the authors of Rasengan.js, the people who are at the origin of this great framework:

- Dilane Kombou ([**@dilanekombou**](https://twitter.com/dilanekombou))
npm package: @rasenganjs/theme
Description: Library that handles themes for Rasengan.JS applications
Author: dilane3
Latest version: 1.0.1

# Rasengan Theme

[![npm version](https://badge.fury.io/js/@rasenganjs%2Ftheme.svg)](https://badge.fury.io/js/@rasenganjs%2Ftheme)
![NPM Downloads](https://img.shields.io/npm/dm/%40rasenganjs%2Ftheme)
[![GitHub license](https://img.shields.io/github/license/rasengan-dev/rasengan-theme)](https://github.com/rasengan-dev/rasengan-theme/blob/main/LICENSE)

Simple Rasengan.JS package to manage the theme of your application.

## Installation

You can install the `@rasenganjs/theme` package by using the following command:

```bash
npm install @rasenganjs/theme
```

or

```bash
yarn add @rasenganjs/theme
```

## Usage

Here is an example of how you can use the `@rasenganjs/theme` package:

### Wrap your application with `ThemeProvider`

```tsx
import { type AppProps } from 'rasengan';
import AppRouter from '@app/app.router';
import ThemeProvider from '@rasenganjs/theme';

export default function App({ Component, children }: AppProps) {
  return (
    <ThemeProvider>
      <Component router={AppRouter}>{children}</Component>
    </ThemeProvider>
  );
}
```

### Use the `useTheme` hook to get the current theme

```tsx
import { useTheme } from '@rasenganjs/theme';

const Card = () => {
  const { theme, actualTheme, setTheme, isDark } = useTheme();

  return <div>{/* Code here */}</div>;
};
```

| Property      | Type                      | Description                                           | Values                        |
| ------------- | ------------------------- | ----------------------------------------------------- | ----------------------------- |
| `theme`       | `string`                  | The current theme                                     | `light` or `dark` or `system` |
| `actualTheme` | `string`                  | The actual theme                                      | `light` or `dark`             |
| `setTheme`    | `(theme: string) => void` | A function to set the theme                           | -                             |
| `isDark`      | `boolean`                 | A boolean that indicates if the current theme is dark | `true` or `false`             |

## Community

The Rasengan.js community can be found on [GitHub Discussions](https://github.com/rasengan-dev/rasenganjs/discussions) where you can ask questions, voice ideas, and share your projects with other people.

We also have a [Twitter](https://twitter.com/rasenganjs) account where you can follow us to get the latest news about Rasengan.js.

## License

Rasengan.js is [MIT licensed](https://github.com/rasengan-dev/rasengan-theme/blob/main/LICENSE).

## Authors

Here is the authors list:

- Dilane Kombou ([**@dilanekombou**](https://twitter.com/dilanekombou))
npm package: @rasenganjs/vercel
Description: Vercel adapter to serve Rasengan apps on Vercel
Latest version: 1.1.3

# Rasengan Vercel

[![npm version](https://badge.fury.io/js/@rasenganjs%2Fvercel.svg)](https://badge.fury.io/js/@rasenganjs%2Fvercel)
![NPM Downloads](https://img.shields.io/npm/dm/%40rasenganjs%2Fvercel)
[![GitHub license](https://img.shields.io/github/license/rasengan-dev/rasengan-serve)](https://github.com/rasengan-dev/rasengan-serve/blob/main/LICENSE)

The `@rasenganjs/vercel` package is an adapter that configures Rasengan.js applications for deployment on the Vercel platform. It ensures that the project is properly structured and optimized for Vercel's serverless environment.

## Installation

```bash title="Terminal"
npm install @rasenganjs/vercel
```

## Configuration

To configure Rasengan.js for Vercel, you need to import the adapter in your `rasengan.config.js` file and integrate it with the Rasengan.js plugin.

### Example Configuration

```javascript title="rasengan.config.js" showLineNumbers {2,3,8-10}
import { defineConfig } from 'rasengan';
import { rasengan } from 'rasengan/plugin';
import { configure } from '@rasenganjs/vercel';

export default defineConfig({
  vite: {
    plugins: [
      rasengan({
        adapter: configure(),
      }),
    ],
  },
});
```

In the example above, the `configure` function from `@rasenganjs/vercel` is used to set up the Vercel adapter for the Rasengan.js application. The adapter is then passed to the `rasengan` plugin exported from `rasengan/plugin` to enable the necessary features for Vercel deployment.

## Deployment

Once the adapter is configured, you can deploy your Rasengan.js application using Vercel's CLI:

```bash title="Terminal"
vercel
```

Alternatively, you can link your GitHub repository to Vercel, and it will automatically detect the configuration and deploy your application.

Learn more on the [Documentation](https://rasengan.dev/docs/core/optimizing/images) website.

## Community

The Rasengan.js community can be found on [GitHub Discussions](https://github.com/rasengan-dev/rasenganjs/discussions) where you can ask questions, voice ideas, and share your projects with other people.

We also have a [Twitter](https://twitter.com/rasenganjs) account where you can follow us to get the latest news about Rasengan.js.

## License

Rasengan.js is [MIT licensed](https://github.com/rasengan-dev/rasengan-vercel/blob/main/LICENSE).

## Authors

Here is the authors list:

- Dilane Kombou ([**@dilanekombou**](https://twitter.com/dilanekombou))