@opensea/ui-kit

@opensea/ui-kit

@opensea/ui-kit houses our design system components as well as various re-usable utilities and styles.

Getting started

Install

pnpm add @opensea/ui-kit

Usage

import { Text } from "@opensea/ui-kit"
import { CircleFilled } from "@opensea/ui-kit/icons"

export const Component = () => {
  return (
    <>
      <Text size="md">Some very nice text</Text>
      <Button icon={CircleFilled}>And a button</Button>
    </>
  )
}

Local development

Running tests

pnpm test:unit

Entrypoints

@opensea/ui-kit comes with multiple entrypoints.

1. @opensea/ui-kit ~ components & utilities
2. @openase/ui-kit/hooks ~ hooks
3. @openase/ui-kit/icons ~ icons & logos
4. @openase/ui-kit/fs ~ tailwind and filesystem helpers

Setting up tailwind config

import type { Config } from "tailwindcss"
import { tailwindBase } from "@opensea/ui-kit"
import { getTailwindContentFiles } from "@opensea/ui-kit/fs"

export default {
  content: ["./app/**/*.{js,ts,jsx,tsx,mdx}", ...getTailwindContentFiles()],
  presets: [tailwindBase],
} satisfies Config

Usage with NextJS

Theming

Take a look at the @opensea/next-themes package.

Compound components in server components

Some components like Select have associated compound components (Select.Item), where Item is a compound component name. Compound components cannot be used in server components. Instead, use SelectItem syntax or add 'use client'; directive to the top of the file.

Example that will not work in server components:

import { Select } from "@opensea/ui-kit"

// This will throw an error
export default function Page() {
  return <Select.Item size="sm">Hello</Select.Item>
}

Example with 'use client'; directive:

"use client"
import { Select } from "@opensea/ui-kit"

// No error
export default function Page() {
  return <Select.Item size="sm">Hello</Select.Item>
}

Example with SelectItem syntax:

import { SelectItem } from "@opensea/ui-kit"

// No error
export default function Page() {
  return <SelectItem size="sm">Hello</SelectItem>
}