@heathmont/moon-cmdk-tw

📦 Moon React SearchCmdk component package

SearchCmdk is a command palette component designed to provide a quick and efficient way to search and navigate within an application.

🚀 Features

• 🏎 Fast and responsive search experience
• 🔍 Supports keyboard navigation
• 🎨 Customizable appearance and behavior
• 🔄 Fully typed with TypeScript support

📦 Installation

Install via npm:

npm install @heathmont/moon-cmdk-tw

Or using pnpm:

pnpm install @heathmont/moon-cmdk-tw

Or yarn:

yarn @heathmont/moon-cmdk-tw

🎯 Usage

Basic Example

import { SearchCmdk } from "@heathmont/moon-cmdk-tw/lib";

const commands = [
  { label: "Open Settings", action: () => console.log("Settings opened") },
  { label: "Go to Dashboard", action: () => console.log("Navigating to Dashboard") },
];

const App = () => {
  return <SearchCmdk commands={commands} placeholder="Type a command..." />;
};

export default App;

⚙️ Props

Prop	Type	Description
commands	Array<{ label: string; action: () => void }>	List of commands available in the palette
placeholder	string	Placeholder text for the input field
onClose	() => void	Callback when the search is closed

🎨 Customization

You can style the component using CSS variables or override styles with TailwindCSS.

🧭 Explore more

Themes package

Table package

Base package

Core package

🛠️ Contributing

If you're interested in contributing to Moon Design System, please read our contributing docs before submitting a pull request.