@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

or

yarn 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 "tailwindcss";
@import "tw-animate-css";
@import "@opensea/ui-kit/styles/theme.css";
@source "../node_modules/@opensea/ui-kit/**/*.{ts,tsx,js,jsx}";

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>
}