Draft UI

Installation

Here's everything you need to get started

  1. Install TailwindCSS

    Depending on your project, steps to install Tailwind may vary. Check out their installation page for guidance.

  2. Install Required Dependencies

    bash
    npm install react-aria-components@1.0.0 cva@beta tailwind-merge tailwindcss-animate tailwindcss-react-aria-components@1.0.0

    This project requires the following packages:

  3. Install Icons

    Draft UI uses Lucide Icons by default. You can use whichever library you prefer, but you'll need to replace the default icons manually.

    bash
    npm install lucide-react

  4. Configure Path Aliases

    Draft UI uses the path alias @/* by default. If you want to use a different alias, you'll need to update your components.

    tsconfig.json
    // ...
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
// ...

  5. Configure Tailwind

    Make sure to include the tailwindcss-animate plugin.

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: ['app/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],
  plugins: [
    require('tailwindcss-animate'),
    require('tailwindcss-react-aria-components'),
  ],
}

  6. Configure CVA

    Add twMerge to your cva.config.ts. This way, anytime you use the cx(...) function any conflicting Tailwind classes will be gracefully resolved.

    cva.config.ts
    import { defineConfig } from 'cva'
import { twMerge } from 'tailwind-merge'
 
export const { cva, cx, compose } = defineConfig({
  hooks: {
    onComplete: (className) => twMerge(className),
  },
})

  7. Many components use built-in Link components to handle navigation. By default, these links perform native browser navigation when they are interacted with.

    In order for these links to work as expected with whichever framework you're using, wrap your application using React Aria's RouterProvider component.

    app/provider.tsx
    'use client'
 
import { useRouter } from 'next/navigation'
import { RouterProvider } from 'react-aria-components'
 
export function ClientProviders({ children }) {
  const router = useRouter()
 
  return (
    <RouterProvider navigate={router.push}>
      {children}
    </RouterProvider>
  )
}
    app/layout.tsx
    import { ClientProviders } from './provider';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ClientProviders>{children}</ClientProviders>
      </body>
    </html>
  );
}

    For more information, go to the React Aria Client Side Routing.

  8. Configure @sly-cli/sly (optional)

    If your installation varies from any of the configs described above (like if your components are in a different location) you'll want to update your sly.json to make sure your CLI installs work correctly.

    Go to the CLI page to learn more.

  9. All Done!

    Now you're ready to start building your application!