Installation

Requirements

Before installing Platform UI, make sure you have the following:

• Node.js: Version 18.17 or later
• Package manager: npm, pnpm, or yarn

Setup

1. Create a Next.js project

Start by creating a new Next.js project:

1npx create-next-app@latest

Follow the prompts to configure your project. Make sure to select TypeScript and Tailwind CSS when prompted.

2. Initialize shadcn UI

Once your Next.js project is set up, initialize shadcn UI which will set up all the necessary configurations:

1# Using npm
2npx shadcn-ui@latest init
3
4# Using pnpm
5pnpm dlx shadcn-ui@latest init

Follow the prompts to complete the setup. This will automatically:

• Configure Tailwind CSS
• Set up the necessary utility functions
• Install required dependencies

3. Install Platform UI Components

Now you can install our Platform UI components:

1# Using npm
2npx shadcn@latest add "https://platform-ui.southguild.tech/r/dialog-stack"
3npx shadcn@latest add "https://platform-ui.southguild.tech/r/animated-button"
4
5# Using pnpm
6pnpm dlx shadcn@latest add "https://platform-ui.southguild.tech/r/dialog-stack"
7pnpm dlx shadcn@latest add "https://platform-ui.southguild.tech/r/animated-button"

Components will be installed to the components/platform-ui/ directory.

Manual Installation

If you prefer to add components manually, you can copy them directly from our repository or from the documentation examples.

Example For the Dialog Stack component, make sure you have these dependencies:

1# Using npm
2npm install @radix-ui/react-portal @radix-ui/react-use-controllable-state
3
4# Using pnpm
5pnpm add @radix-ui/react-portal @radix-ui/react-use-controllable-state

That's it!

You're now ready to start using Platform UI components in your project. Check out our components to see what's available.