An Astro component library built on DaisyUI and Tailwind CSS v4. Adds an Astro integration that automatically injects Tailwind + DaisyUI into your project — no manual CSS imports needed.
bun add @ppreeper/neokit
# or
npm install @ppreeper/neokitAdd the integration to your astro.config.mjs:
// astro.config.mjs
import { defineConfig } from 'astro/config';
import neokit from '@ppreeper/neokit';
export default defineConfig({
integrations: [
neokit({
themes: ['light', 'dark'], // DaisyUI themes — true = all, false = none
fontSize: '16px', // base font-size on <html>, or false to skip
}),
],
});That's it. Tailwind CSS v4 and DaisyUI are injected automatically — no @import in your layouts required.
Import any component directly by path:
---
import Button from '@ppreeper/neokit/components/Button.astro';
import Card from '@ppreeper/neokit/components/Card.astro';
import Badge from '@ppreeper/neokit/components/Badge.astro';
---
<Button color="primary">Click me</Button>
<Card classes="w-80 card-border shadow">
<div class="card-body">
<h2 class="card-title">Hello</h2>
<Badge color="success">New</Badge>
</div>
</Card>You can also import from the barrel (named exports):
import { Button, Card, Badge } from '@ppreeper/neokit';All 61 components map 1:1 to DaisyUI's component list.
Button · Dropdown · Modal · Swap · ThemeController
Accordion · Avatar · Badge · Card · Carousel · ChatBubble · Collapse · Countdown · Diff · Kbd · List · Stat · Stats · Status · Table · Timeline
Breadcrumbs · Dock · Menu · Navbar · Pagination · Steps · Tabs
Alert · Loading · Progress · Skeleton · Toast · Tooltip
Checkbox · FileInput · Input · Radio · Range · Rating · Select · Textarea · Toggle
Artboard · Divider · Drawer · Footer · Hero · Indicator · Join · Mask · Stack
MockupBrowser · MockupCode · MockupPhone · MockupWindow
| Option | Type | Default | Description |
|---|---|---|---|
themes |
boolean | string[] |
["light", "dark"] |
DaisyUI themes to enable. true = all, false = none. |
fontSize |
string | false |
"16px" |
Base font-size set on <html>. Pass false to skip. |
astro >= 5.0.0@tailwindcss/vite >= 4.0.0
Both are devDependencies in your Astro project and do not need to be added separately if you already have Astro installed.
MIT