GitHub

Installation Guide

Setting up Donut-UI in your project is quick and straightforward. Follow these simple steps to integrate Donut-UI into your React or Next.js application and start building stunning user interfaces in no time.

Step 1: Install Donut-UI

To begin, install the Donut-UI package using npm. Run the following command in your terminal:

npm i @satyam95/donutui

This will add Donut-UI to your project’s dependencies, making it ready for use.

Step 2: Configure Theme Colors

Donut-UI provides a default color palette, but you can easily customize it to align with your brand. To configure the theme, add the following CSS variables to your global stylesheet or include them in your CSS-in-JS solution:

:root {
  --color-background: oklch(1 0 0);
  --color-foreground: oklch(0.13 0.028 261.692);
  --color-primary: oklch(22.5% 0.146 265.82);
  --color-primary-foreground: oklch(100% 0 0);
  --color-secondary: oklch(0.69 0.146 265.82);
  --color-secondary-foreground: oklch(100% 0 0);
  --color-destructive: oklch(63.7% 0.237 25.331);
  --color-accent: oklch(0.97 0 0);
  --color-border: oklch(0.928 0.006 264.531);
  --color-muted: oklch(0.967 0.003 264.542);
  --color-muted-foreground: oklch(0.551 0.027 264.364);
  --color-input: oklch(0.928 0.006 264.531);
  --color-popover: oklch(1 0 0);
  --color-popover-foreground: oklch(0.13 0.028 261.692);
}

These variables define the color scheme for your application, ensuring a cohesive and polished look. You can modify these values to suit your specific design needs.

Step 3: Start Using Components

Once installed and configured, you can import components from Donut-UI and start using them in your application. Here’s an example:

import { Button } from "@satyam95/donutui";

function App() {
  return <Button>Default Button</Button>;
}

export default App;

With just a few lines of code, you’ve added a functional and styled button to your application.

Best Practices

  1. Organize Your Styles: Use a global CSS or theme file to manage your Donut-UI configurations.
  2. Explore the Documentation: Leverage the full potential of Donut-UI by exploring its documentation and learning about advanced features.
  3. Stay Updated: Keep your Donut-UI package up to date to access new components, features, and improvements.

By following these steps, you’ll be ready to harness the power of Donut-UI to create visually stunning and highly functional applications. Let’s build something amazing together!

Introduction