Installation

To get started with ruru UI, you'll need to install the necessary dependencies and set up your project structure. This guide will walk you through the process step by step.

Run the CLI

Run the ruru-ui-cli init command to setup your project:

npx ruru-ui-cli@latest init

Configure components

You will need to answer a few questions to configure the ruru.json file:

◇ Would you like to use TypeScript (recommended)? Yes
◇ Where is your global CSS file? ./app/globals.css
◇ Where is your tailwind.config.js located? ./tailwind.config.js
◇ Would you like to use CSS variables for colors? Yes
◇ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not)
◇ Configure the import alias for components: @/components/ui
◇ Configure the import alias for utils: @/lib/utils
◇ Configure the import alias for provider: @/provider
◇ Configure the import alias for interfaces: @/interfaces
◇ Would you like to use RSC ? Yes
◇ Write configuration to ruru.json. Proceed? Yes

Add the Provider

Add the RuruProvider component to your layout file:

layout.tsx

import { RuruProvider } from "@/provider";
 
export default function RootLayout() {
  return (
    <html lang="en">
      <body>
        <RuruProvider>{children}</RuruProvider>
      </body>
    </html>
  );
}

That's it

Now you can start adding components

npx ruru-ui-cli@latest add button

This command adds the button component to your project.

App.tsx

import { Button } from "@/components/ui/button"
 
export default function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

That's it! You're now ready to start building beautiful interfaces with ruru UI. If you have any questions or need further assistance, feel free to reach out to us on GitHub Discussions.

Run the CLI

Configure components

Add the Provider

That's it

On this page