Manual Installation

Add Rayden UI to an existing React project. For new projects, consider using create-rayden-app for a faster setup.

Install the package


# npm
npm install @raydenui/ui
 
# pnpm
pnpm add @raydenui/ui
 
# yarn
yarn add @raydenui/ui

Peer Dependencies

Rayden UI requires React 18 or higher:


npm install react react-dom

Import the Styles

Add the Rayden UI stylesheet to your app’s entry point:


// App.tsx or main.tsx
import "@raydenui/ui/styles.css";

Or in CSS:


/* globals.css */
@import "@raydenui/ui/styles.css";

Use Components


import { Button, Input, Badge } from "@raydenui/ui";
 
function App() {
  return (
    <div className="flex flex-col gap-4 p-8">
      <Input
        label="Email"
        placeholder="you@example.com"
        helperText="We'll never share your email"
      />
      <Button variant="primary" size="lg">
        Subscribe
      </Button>
      <Badge color="success">Active</Badge>
    </div>
  );
}

TypeScript

All components are fully typed. Import types alongside components:


import { Button } from "@raydenui/ui";
import type { ButtonProps, ButtonVariant, ButtonSize } from "@raydenui/ui";

Next Steps

Tailwind Setup — Use Rayden tokens in your Tailwind classes
Components — Browse all available components
Design Tokens — Learn about the color and spacing system