@cryptomystery/ui

Shared UI components for Cryptomystery built with Tailwind CSS and Radix UI.

Installation

npm install @cryptomystery/ui

Usage

1. Add the following to your tailwind.config.js:

const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["./node_modules/@cryptomystery/ui/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      // Copy the theme configuration from the UI package
    }
  },
  plugins: [require("tailwindcss-animate")],
}

2. Import styles:

import "@cryptomystery/ui/styles.css"

3. Import components and utilities:

// Components (import from components/)
import { Button } from "@cryptomystery/ui/components/button"
import { Card } from "@cryptomystery/ui/components/card"

// Hooks (import from hooks/)
import { useTheme } from "@cryptomystery/ui/hooks/use-theme"

// Utils (import from utils)
import { cn } from "@cryptomystery/ui/utils"

4. For theming, use the appropriate provider:

For Next.js:

import { ThemeProvider } from "@cryptomystery/ui/components/theme-provider-next"

export default function RootLayout({ children }) {
  return <ThemeProvider>{children}</ThemeProvider>
}

For React:

import { ThemeProvider } from "@cryptomystery/ui/components/theme-provider-react"

export default function App({ children }) {
  return <ThemeProvider>{children}</ThemeProvider>
}