#How to use next ui in storybook?

9 messages · Page 1 of 1 (latest)

sinful sinew
#

I am trying to use my own storybook with next ui. Is there any tutorial to follow?

hybrid hamlet
sinful sinew
# hybrid hamlet Did you by chance figure this out? I'm trying to set up Storybook for my project...

I got it to work. But I didn't work on it since, it was kind of a testing.

That's my tailwind.config.ts:

import type { Config } from "tailwindcss";
import  {nextui} from "@nextui-org/theme";
const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
     // single component styles
     "./node_modules/@nextui-org/theme/dist/components/button.js", 
     // or you can use a glob pattern multiple component styles
     './node_modules/@nextui-org/theme/dist/components/(button|snippet|code|input).js',
    // or you can use a glob pattern for all componnets
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [nextui()],

};
export default config;
#

preview.ts:

import type { Preview } from "@storybook/react";
import '@/app/globals.css'
const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        date: /Date$/i,
      },
    },
  },
};

export default preview;

main.ts:

import type { StorybookConfig } from "@storybook/nextjs";

import path, { join, dirname } from "path";

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, "package.json")));
}
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-onboarding"),
    getAbsolutePath("@storybook/addon-interactions"),
  ],
  framework: {
    name: getAbsolutePath("@storybook/nextjs"),
    options: {
      builder: {
        useSWC: true, // Enables SWC support
      },
    },
  },
  docs: {
    autodocs: "tag",
  },
  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, '../src'),
      };
    }
    return config;
  },
};
export default config;
sinful sinew
#

globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
hybrid hamlet
#

Thanks for sharing !

sinful sinew
idle sphinx