A minimal command palette for Astro with 0 dependencies.
npm install astro-command-paletteJust by importing the component and putting inside the body, your command palette is already working.
---
import CommandPalette from 'astro-command-palette';
---
<body>
<CommandPalette />
</body><script>
import createCommandPaletteItems from 'astro-command-palette/hooks';
createCommandPaletteItems([
{
type: 'action',
name: 'My New Action',
icon: '<svg>...</svg>', // Optional
handler: () => console.log("Hello Word!")
},
// A link action without icon
{
type: 'action',
name: 'My New Link',
url: 'https://github.com'
}
])
</script>You can also define nested pages with more actions:
<script>
import createCommandPaletteItems from 'astro-command-palette/hooks';
createCommandPaletteItems([
{
type: 'page',
name: 'My New Page',
icon: '<svg>...</svg>', // Optional
actions: [/* Define the actiions inside your new page */]
}
])
</script>By the moment the only way to customize the command palette is with css variables:
| CSS Variable | Description |
|---|---|
--command-palette-bg-color |
Background color of the command palette modal |
--command-palette-border-radius |
Border radius of the command palette |
--command-palette-border-color |
Border color of the command palette |
--command-palette-backdrop-color |
Background color of the backdrop overlay |
--command-palette-header-font-size |
Font size of the command palette header |
--command-palette-header-bg-color |
Background color of the header |
--command-palette-header-text-color |
Text color of the header |
--command-palette-header-font-family |
Font family of the header |
--command-palette-header-placeholder-color |
Text color of the placeholder text in the input field |
--command-palette-icons-color |
Color of the icons in command items |
--command-palette-items-selected |
Background color of selected items |
--command-palette-items-font-size |
Font size of the command items |
--command-palette-items-text-color |
Text color of the command items |
--command-palette-items-font-family |
Font family of the command items |
--command-palette-footer-bg-color |
Background color of the footer |
--command-palette-keybinds-bg-color |
Background color of the keybinds section |
--command-palette-footer-text-color |
Text color of the footer |
--command-palette-footer-font-family |
Font family of the footer |
--command-palette-keybinds-text-color |
Text color of the keybinds |
--command-palette-keybinds-font-family |
Font family of the keybinds |
--command-palette-keybinds-border-radius |
Border radius of the keybinds |
All contributions are welcome:
With 🧡 by Pau García Chiner
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent