Components and Utils for Raycast extensions
npm install @raycast-community/uiReady to use Raycast Components.
The components are based on native Raycast components (@raycast/api), but they are offer more functionality.
Some components are specifically designed for particular use cases, such as MenuBarExtra.RootOnly.
⚠️ This is not(!) an official Raycast library ⚠️
Raycast's native components are awesome, and you can build a lot of stuff with them.
After developing many extensions, I found myself rebuilding the same components repeatedly.
While some parts may eventually be added to the native components over time, some are out of the scope of @raycast/api in my opinion.
This library is here to address these needs.
npm install @raycast-community/ui
Minimum Raycast API version 1.64.0. The minimum version may increase over time to support the latest features.
This library is still in development. I try not to break existing features, but it can happen.
I would recommend setting the @raycast-community/ui in package.json to ~ (for only upgrading the fix versions) for now, instead of the common ^prefix (which automatically updates every minor version)!
e.g. "@raycast-community/ui": "~0.1"
The components are mainly structured as you know them from Raycast itself and can be used mixed with native components.
You can mix the components with the native ones.
It is recommended to prefix the component upon import to avoid naming collision when mixing Raycast native components with RaycastUI components.
This can be done in various ways like following ...
``tsx`
import * as rui from "@raycast-community/ui";
`tsx`
import { Action as RUIAction } from "@raycast-community/ui";
`tsx`
import { Action as RCAction } from "@raycast/api"; // alias Raycast native components
import { Action } from "@raycast-community/ui"; // use RaycastUI without alias
You can find an API reference for all components here
Check out the test commands in this repository to see how to use the components.
You can clone this repository and build it yourself to play around with different components from the library.
`tsx
import { ActionPanel, List } from "@raycast/api";
import { Action } from "@raycast-community/ui";
export default function Command() {
return (
actions={
limits={{ min: { value: 2 }, max: { value: 8 } }}
predefined={[2, 3, 4, 5, 6, 7, 8]}
onValueChanged={(v) => console.log(Number changed to ${v})}
/>
}
/>
);
}
`
`tsx
import { LaunchType, showHUD } from "@raycast/api";
import { MenuBarExtra } from "@raycast-community/ui";
export default function MenuCommand() {
return (
}
textLimits={{ maxLength: 10 }}
onAction={() => showHUD("Child Menu from Menubar")}
/>
command={{
name: "test",
type: LaunchType.UserInitiated,
}}
/>
);
}
`
To build the library you need to call npm ci && npm run build.
Go to the tests directory and build it to be able to test the components. Don't forget to build the library first before using the tests!
Build it via cd tests && npm ci && npm run build`