+
+
+ tailwind
+
+
+
+
+ )
+}
diff --git a/apps/website/components/palette/swatches.tsx b/apps/website/components/palette/swatches.tsx
new file mode 100644
index 0000000..27dcc37
--- /dev/null
+++ b/apps/website/components/palette/swatches.tsx
@@ -0,0 +1,190 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+import { CheckIcon, XMarkIcon } from '@heroicons/react/20/solid'
+import clsx from 'clsx'
+import { motion, useMotionValueEvent, useScroll } from 'framer-motion'
+import { useAtom } from 'jotai'
+
+import { Button, Input, Tooltip } from '@nextui-org/react'
+
+import { getColorName } from '../../utils/color'
+import { ColorPicker } from '../color-picker'
+import { colorsAtom, editingSwatchesAtom, paletteAtom } from './utils'
+
+export function PaletteSwatches() {
+ const [inPaletteView, setInPaletteView] = useState(false)
+ const [colors, setColors] = useAtom(colorsAtom)
+ const [palette] = useAtom(paletteAtom)
+
+ const [editingSwatches, setEditingSwatches] = useAtom(editingSwatchesAtom)
+
+ const isEmptyPalette = colors.length === 0
+
+ const { scrollY } = useScroll()
+
+ useMotionValueEvent(scrollY, 'change', latest => {
+ if (latest > window.innerHeight / 2) {
+ !inPaletteView && setInPaletteView(true)
+ } else {
+ inPaletteView && setInPaletteView(false)
+ }
+ })
+
+ return (
+ tailwind-plugin-palette
+
+ tailwind
+
+ plugin
+
+ palette
+
+
+
+
+ Install via
+
+
+ npm
+
+
+ pnpm
+
+
+ bun
+
+
+
+ {isEmptyPalette ?
+
+ )
+}
+
+function Swatches({ name, swatches }: { name: string; swatches: Record
+
+ : colors.map((swatch, index) => {
+ const editingSwatch = editingSwatches.get(index)
+ const isInvalid = Boolean(editingSwatch?.errorMessage)
+
+ return (
+ There is no swatch yet,
+Please click the plus button or choose a primary color
+
+
+ {
+ const newSwatch = { ...swatch, name: value }
+ editingSwatches.set(index, newSwatch)
+ setEditingSwatches(new Map(editingSwatches))
+ }}
+ value={editingSwatch?.name ?? swatch.name}
+ />
+
+ {!!swatch.hex && (
+ {
+ const newSwatch = { ...swatch, hex: value, name: getColorName(value) }
+ editingSwatches.set(index, newSwatch)
+ setEditingSwatches(new Map(editingSwatches))
+ }}
+ size="sm"
+ value={editingSwatch?.hex ?? swatch.hex}
+ />
+ )}
+
+ {editingSwatch && (editingSwatch.name !== swatch.name || editingSwatch.hex !== swatch.hex) ?
+ <>
+
+
+
+ : null}
+
+ {!!palette[swatch.name] &&
+ )
+ })
+ }
+
+
+
+ {
+ if (!options.primary) {
+ colors.unshift({ disabled: true, name: 'primary' }, { disabled: true, name: 'secondary' })
+ }
+ startTransition(() => {
+ setOptions(options => ({ ...options, primary: value }))
+ })
+ }}
+ value={options.primary}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ How to configure your Tailwind.CSS?
+
+
+
+
+
+ )
+}
diff --git a/apps/website/components/palette/utils.tsx b/apps/website/components/palette/utils.tsx
new file mode 100644
index 0000000..a3f62d8
--- /dev/null
+++ b/apps/website/components/palette/utils.tsx
@@ -0,0 +1,48 @@
+import type { ButtonProps } from '@nextui-org/react'
+
+import { forwardRef } from 'react'
+
+import { motion } from 'framer-motion'
+import { atom } from 'jotai'
+import { createPalette } from 'tailwind-plugin-palette'
+
+import { Button } from '@nextui-org/react'
+
+export const IconButton = forwardRef(function IconButton(props: ButtonProps, ref: any) {
+ return
+})
+export const MotionIconButton = motion(IconButton)
+
+export type Options = {
+ dark?: boolean
+ harmonize?: boolean
+ primary?: string
+ reversed?: boolean
+}
+
+export const optionsAtom = atom
+ setOptions({ ...options, dark: value })}>
+ Dark
+
+
+ setOptions({ ...options, reversed: value })}
+ >
+ Reversed
+
+
+ setOptions({ ...options, harmonize: value })}
+ >
+ Harmonize
+
+
+ More options
+
+
+ 1. Install tailwind-plugin-palette
+
+
+ npm
+
+ pnpm
+
+ bun
+
+
+ 2. Configure your tailwind config file
+{`import palette, { getTailwindColors } from 'tailwind-plugin-palette'
+
+export default {
+ plugins: [
+ palette({
+ colors: getTailwindColors(400),
+ primary: "#ADCE91",
+ dark: true,
+ reversed: true,
+ harmonize: true
+ })
+ ]
+}`}
+ 3. Options
+-
+
-
+
{'colors: Record: A colors object, where the key is the name of the + color and the value is the hexadecimal value of the color. eg,{' '} +{'colors: { red: "#ff0000" }'}+
+ -
+
primary: string: Provide a hex value as primary color, automatically generate a secondary + color +
+ -
+
dark: boolean: Reduce the brightness to adapt to the dark mode +
+ -
+
reversed: boolean: Reverse the color value +
+ -
+
harmonize: boolean: Make the palette more harmonious with the primary color(primary + required) +
+
+ 
+ 
+