Ruru UITo 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.
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 RuruProvider component to your layout file:
import { RuruProvider } from "@/provider";
export default function RootLayout() {
return (
<html lang="en">
<body>
<RuruProvider>{children}</RuruProvider>
</body>
</html>
);
}Now you can start adding components
npx ruru-ui-cli@latest add buttonThis command adds the button component to your project.
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.