🚨 Shai-Hulud Strikes Again:More than 500 packages and 700+ versions compromised.Technical Analysis →

Book a Demo Install Sign in

@ds-pack/daisyui

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ds-pack/daisyui

A bare-bones component library built using:

latest

Source

npm

Version: 0.0.11

Version published: 2 years ago

Maintainers: 1

Created: 3 years ago

Source

`@ds-pack/daisyui`

A bare-bones component library built using:

Setup:

Warning You will need to use tailwindcss in your consuming project in order to use this library!

Install:

# Install the package and it's peerDependencies
yarn add @ds-pack/daisyui @ds-pack/use-refs nanopop daisyui

You'll also most likely need to install tailwindcss and it's dependencies:

yarn add -D tailwindcss postcss autoprefixer

Usage with Next.js:

Configure tailwind:

Add the following tailwind.config.js file:

// tailwind.config.js
let path = require('path')

module.exports = {
  content: [
    './app/**/*.{tsx}',
    // Ensure Tailwind processes the `@ds-pack/daisyui` library!
    path.join(path.dirname(require.resolve('@ds-pack/daisyui')), '/**/*.js'),
  ],
  // Configure daisyui:
  plugins: [require('daisyui')],
}

run yarn dlx tailwindcss init -p

Configure the Next app:

Within next.config.js, you'll need to configure the following:

let config = {
  modularizeImports: {
    // Manages code splitting the components you import
    '@ds-pack/daisyui': {
      transform: '@ds-pack/daisyui/dist/{{member}}',
    },
  },
  // ...
}

Create a root globals.css file with the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

Import the above globals.css file within your root layout:

// within `layout.tsx` or `_app.tsx`:
import '@root/styles/globals.css'

Configure the daisyui theme for the layout by passing in data-theme on the root html element:

// within `layout.tsx` or `_document.tsx`:
// import { themeClass } from '@ds-pack/components'

function Layout({ children }) {
  return <html data-theme="garden">...</html>
}

Tools:

Typescript
Jest

Cutting a Release:

Update the version in package.json
Push to main (with associated changes)
Create release on the repo
- Workflow will kick off and build + publish the new version

Docs:

Components

Hooks

useTapable

System Props:

is - essentially forwardedAs from styled-components, but easier to type 😄
testId - An optional prop that allows for passing in data-testid to the rendered components

TODO:

Button's don't have animation when using the keyboard to activate them (consider either burning down custom element usage, or expose a way to know if the button is active or not within Tapable/useTapable)
Dropdown
InlineCode theme enhancements (e.g. dark mode and light mode versions)
Input validation states
Nested lists and spacing stuff, etc
Box
Stack

FAQs

What is @ds-pack/daisyui?

Is @ds-pack/daisyui well maintained?

Package last updated on 17 Jul 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@ds-pack/daisyui

Setup:

Install:

Configure tailwind:

Configure the Next app:

Tools:

Cutting a Release:

Docs:

Components

Hooks

System Props:

TODO:

Related posts

Introducing Webhook Events for Alert Changes

ENISA Becomes a CVE Root, Expanding Its Role in Europe’s Vulnerability Ecosystem