@ds-pack/daisyui
Advanced tools
@ds-pack/daisyuiA bare-bones component library built using:
Warning You will need to use
tailwindcssin your consuming project in order to use this library!
# 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:
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
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>
}
is - essentially forwardedAs from styled-components, but easier to type đtestId - An optional prop that allows for passing in data-testid to the
rendered componentsFAQs
A bare-bones component library built using:
The npm package @ds-pack/daisyui receives a total of 2 weekly downloads. As such, @ds-pack/daisyui popularity was classified as not popular.
We found that @ds-pack/daisyui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Research
Socket Threat Research maps a rare inside look at OtterCookieâs npm-Vercel-GitHub chain, adding 197 malicious packages and evidence of North Korean operators.
Research
Socket researchers identified a malicious Chrome extension that manipulates Raydium swaps to inject an undisclosed SOL transfer, quietly routing fees to an attacker wallet.
Research
/Security News
Another wave of Shai-Hulud campaign has hit npm with more than 500 packages and 700+ versions affected.