Dinachi

Design Conventions

Key conventions and patterns used in DinachiUI components.

#Built on Base UI

DinachiUI components are built on Base UI, an unstyled React component library that provides accessibility and keyboard navigation out of the box. We add Tailwind CSS styling and a variant system on top.

#Render Props Instead of asChild

Base UI uses render props instead of the asChild pattern found in Radix UI. This gives explicit control over the rendered element.

asChild (Radix UI)

tsx
<Trigger asChild>
  <button className="custom">
    Click me
  </button>
</Trigger>

render (DinachiUI / Base UI)

tsx
<Trigger
  render={(props) => (
    <button {...props} className="custom">
      Click me
    </button>
  )}
/>

The render prop approach avoids React.cloneElement, makes prop spreading explicit, and composes cleanly with nested components:

tsx
// Render as a link
<Menu.Item render={<a href="/settings" />}>
  Settings
</Menu.Item>
 
// Compose with custom components
<Menu.Trigger render={<MyButton size="md" />}>
  Open menu
</Menu.Trigger>

#Variant System (CVA)

All components use Class Variance Authority for type-safe variant definitions:

tsx
import { cva } from 'class-variance-authority';
 
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent",
        ghost: "hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

#Theming with CSS Variables

All colors use CSS custom properties in OKLCH format. Light and dark themes are defined in :root and .dark blocks — see the Theming page for the full color system.

css
:root {
  --background: oklch(0.986 0.0034 145.5499);
  --primary: oklch(0.1324 0.0033 145.3864);
  --destructive: oklch(0.5248 0.1368 20.8317);
}

Use semantic Tailwind classes like bg-primary, text-muted-foreground, border-border rather than hardcoded values.

#Best Practices