@shuriken-ui/tailwind

by cssninja.io

[!IMPORTANT] Looking for Shuriken UI v4, with tailwind v4 support? Check https://github.com/shuriken-ui/shuriken-ui

Shuriken UI - Tailwind CSS

Shuriken UI is a free and open-source Tailwind CSS UI Kit. It is a collection of components and templates that you can use to build your next Tailwind CSS project.

This package contains the Tailwind CSS preset, components, and shared utils like custom colors used in Shuriken UI.

Installation

pnpm install -D @shuriken-ui/tailwind

Usage

The simplest way to register Shuriken UI is to use withShurikenUI helper function.

// tailwind.config.ts
import { withShurikenUI } from '@shuriken-ui/tailwind'

export default withShurikenUI({
  // your tailwind config
  content: [],
})

You can also direcly import the preset and use it in your config.

// tailwind.config.ts
import type { Config } from 'tailwindcss'
import preset from '@shuriken-ui/tailwind/preset'

export default {
  // your tailwind config, with the preset
  content: [],
  presets: [preset],
} satisfies Config

Also, you can import only the components and utils you needs.

// tailwind.config.ts
import type { Config } from 'tailwindcss'
import { fontFamily } from 'tailwindcss/defaultTheme'
import colors from 'tailwindcss/colors'

import { input, button } from '@shuriken-ui/tailwind/plugins'

export default {
  // your tailwind config, with only the components you need
  plugins: [input, button],
  theme: {
    fontFamily: {
      sans: fontFamily.sans,
      heading: fontFamily.sans,
      alt: fontFamily.sans,
      mono: fontFamily.mono,
    },
    extend: {
      colors: {
        primary: colors.violet,
        'primary-invert': colors.white,
        muted: colors.slate,
        info: colors.sky,
        success: colors.teal,
        warning: colors.amber,
        danger: colors.rose,
      },
    },
  },
} satisfies Config

Customization

Shuriken UI is fully customizable. You can override components by using the theme option.

export default withShurikenUI({
  theme: {
    extend: {
      nui: {
        // your customizations
      },
    },
  },
})

note: Documentation is coming soon!