@arckit/daisyui

DaisyUI/Tailwind component library with primitives, blocks, headless utilities, icons, and theme support.

Table of Contents

• About
• Installation
• Usage
• Subpath Exports
• Framework Integration
• Contributing
• License

A framework-agnostic React component library built on DaisyUI and Tailwind CSS. Components that need routing or image optimization use the asChild pattern (via @radix-ui/react-slot) to stay decoupled from any specific framework.

pnpm add @arckit/daisyui

Basic components (no framework dependency)

import { Button, Badge, Card, Input } from '@arckit/daisyui/primitives';

<Button color='btn-primary'>Submit</Button>
<Badge color='badge-info'>New</Badge>

Link with asChild (framework-agnostic)

import { Link } from '@arckit/daisyui/primitives';

// Plain HTML anchor (default)
<Link href='/about'>About</Link>

// With Next.js Link
import NextLink from 'next/link';

<Link href='/about' asChild>
  <NextLink>About</NextLink>
</Link>

ButtonLink with asChild

import { ButtonLink } from '@arckit/daisyui/primitives';
import NextLink from 'next/link';

<ButtonLink href='/dashboard' color='btn-primary' asChild>
  <NextLink>Dashboard</NextLink>
</ButtonLink>

Avatar with custom image

import { Avatar } from '@arckit/daisyui/primitives';
import Image from 'next/image';

// Plain HTML img (default)
<Avatar src='/photo.jpg' alt='User' />

// With Next.js Image via imageSlot
<Avatar
  src='/photo.jpg'
  alt='User'
  imageSlot={<Image src='/photo.jpg' alt='User' fill />}
/>

ItemCard with asChild

import { ItemCard, ItemCardHeader, ItemCardContent } from '@arckit/daisyui/blocks';
import NextLink from 'next/link';

<ItemCard href='/items/1' asChild>
  <NextLink>
    <ItemCardHeader withArrow>Item title</ItemCardHeader>
    <ItemCardContent>Description</ItemCardContent>
  </NextLink>
</ItemCard>

| Import | Contents | |--------|----------| | @arckit/daisyui | Everything | | @arckit/daisyui/primitives | Button, Link, ButtonLink, Avatar, Badge, Card, Input, Modal, Dropdown, Popover, Tooltip, ComboBox, SortableList, etc. | | @arckit/daisyui/blocks | Footer, Pagination, Breadcrumbs, ItemCard, SkipLinks, Toaster, ThemeChanger, PageHeader, EmptyState, etc. | | @arckit/daisyui/headless | CollapseController, useInjectableModal | | @arckit/daisyui/icons | Icon size constants | | @arckit/daisyui/theme | ThemeProvider | | @arckit/daisyui/utils | cn() classname utility (clsx + tailwind-merge) |

This library is framework-agnostic. Components that typically depend on a framework (Link, Image) use the asChild pattern to delegate rendering to the consumer.

For Next.js projects, you can create thin wrappers:

// your-app/components/link.tsx
import NextLink from 'next/link';
import { Link as DaisyLink, type LinkProps } from '@arckit/daisyui/primitives';

export const Link = (props: LinkProps) => (
  <DaisyLink asChild {...props}>
    <NextLink href={props.href}>{props.children}</NextLink>
  </DaisyLink>
);

See CONTRIBUTING.md for details.

MIT © Marc Gavanier