open-index/open-npm huggingface dataset:
npm package: @pico-ui/colors
Description: > *[TailwindCSS](https://tailwindcss.com) `colors` theme preset using PicoCSS colors*
Latest version: 1.0.0-beta.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# 💖 @pico-ui/colors 💖

> *[TailwindCSS](https://tailwindcss.com) `colors` theme preset using PicoCSS colors*

![NPM Version](https://img.shields.io/npm/v/%40pico-ui%2Fcolors?style=flat&color=ffd7e5) ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/jeroenptrs/pico-ui/unit-tests.yml)


---

Outside reimplementing PicoCSS as a Tailwind plugin, we noticed there's multiple times where we just want to use PicoCSS colors. Even in existing Tailwind projects, in new Tailwind projects that didn't use Pico, you name it.

***(Warning, slight bias ahead! 😅)*** While Tailwind has beautiful colors in their theming, [Pico's colors personally takes the cake](https://picocss.com/docs/colors).

This package provides a frictionless way to not only use PicoCSS colors in a Tailwind project, but to also override Tailwind's existing colors with those of PicoCSS.

## Installation

Install the plugin as a `devDependency`. You are **required** to install `tailwindcss` separately, as well.

```sh
pnpm i -D tailwindcss @pico-ui/colors
npm i -D tailwindcss @pico-ui/colors
yarn add -D tailwindcss @pico-ui/colors
```

## Usage

Add the `colors` property to the theme field of your `tailwind.config` file. The following example is in Typescript:

```typescript
import colors from "@pico-ui/colors";
import type { Config } from "tailwindcss";

export default {
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  theme: {
    colors,
  },
} satisfies Config;
```

Worthy of note is that the goal of this package is to replace the existing Tailwind colors. If you only need a couple, feel free to pick and choose!

### Mix

To mix hex colors, you can import the util function `mix`. Note that right now, these must be strings that consist of the "#" symbol followed by 6 hex characters (and the value will also be returned as such).

We'll note a TODO to support more formats.

```typescript
import colors from "@pico-ui/colors";
import { mix } from "@pico-ui/colors/lib/mix";

const myMixedColor = mix(colors.slate[950], colors.slate[900]);
```
npm package: @picobase_app/mcp-server
Description: An MCP server for managing Picobase schema via AI assistants
Latest version: 0.1.3

# Picobase MCP Server

An official [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) server for Picobase. This server allows AI assistants like Cursor and Claude to directly manage your Picobase schema and collections via natural language.

## Features

- **List Collections**: View all existing schema collections.
- **Get Collection**: Inspect individual collection fields and rules.
- **Create Collection**: Add new collections (base, auth, or view) with defined fields.
- **Update Collection**: Modify the schema of an existing collection.
- **Delete Collection**: Remove a collection from the database.

## Installation & Setup

1. Make sure you have Node.js installed on your machine.
2. Clone the Picobase repository or ensure this package is built:
   ```bash
   cd packages/mcp-server
   npm install
   npm run build
   ```

## Using with Cursor

To connect Cursor to your Picobase instance, you need to add this MCP server in Cursor's settings.

1. Open Cursor Settings (`Cmd/Ctrl + ,`)
2. Go to **Features** -> **MCP** (Model Context Protocol)
3. Click **+ Add new MCP server**
4. Configure it as follows (replace the absolute path and environment variables with your specific values):
   - **Type**: `command`
   - **Name**: `picobase-mcp`
   - **Command**: `node`
   - **Args**: `/absolute/path/to/picobase/packages/mcp-server/dist/index.js`
   - **Env Variables**: Add the following environment variables so it can authenticate to your Picobase instance:
     - `PICOBASE_URL`: e.g. `http://localhost:8090` (or your production URL)
     - `PICOBASE_ADMIN_API_KEY`: Your Admin API Key generated from the dashboard

Click "Save" and ensure the status shows green (connected). You can now ask Cursor chat: "Create a tasks collection with a title and a boolean completed field" and it will directly execute schema modifications for you!

## Using with Claude Desktop

Add the following to your `claude_desktop_config.json` (located via Claude Desktop settings > Developer > Edit Config):

```json
{
  "mcpServers": {
    "picobase": {
      "command": "node",
      "args": ["/absolute/path/to/picobase/packages/mcp-server/dist/index.js"],
      "env": {
        "PICOBASE_URL": "http://localhost:8090",
        "PICOBASE_ADMIN_API_KEY": "pbk_xyz98765_xxxxxxxxxxxxxxxx"
      }
    }
  }
}
```
Restart Claude Desktop to apply the configuration.