@opensea/ui-kit NPM

@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="medium">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.

@opensea/ui-kit ~ components & utilities
@openase/ui-kit/icons ~ icons & logos
@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="small">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="small">Hello</Select.Item>
}

Example with SelectItem syntax:

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

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

@artsy/fresnel @braintree/sanitize-url @radix-ui/react-aspect-ratio @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-toast @radix-ui/react-toggle-group @radix-ui/react-tooltip @radix-ui/react-visually-hidden @react-hook/merged-ref @tanstack/react-virtual bignumber.js clsx cmdk embla-carousel-auto-height embla-carousel-autoplay embla-carousel-class-names embla-carousel-react embla-carousel-wheel-gestures framer-motion highcharts highcharts-react-official lodash.throttle polished radash react-international-phone react-intersection-observer react-markdown remark-gfm sonner tailwind-merge tailwind-variants tailwindcss-animate use-context-selector vaul

@everything-registry/sub-chunk-690 @opensea/wallet

1 day ago

1 day ago

1 day ago

1 day ago

4 days ago

5 days ago

5 days ago

5 days ago

7 days ago

5 days ago

5 days ago

6 days ago

6 days ago

7 days ago

7 days ago

8 days ago

9 days ago

9 days ago

10 days ago

10 days ago

11 days ago

11 days ago

11 days ago

11 days ago

11 days ago

11 days ago

12 days ago

13 days ago

13 days ago

14 days ago

14 days ago

16 days ago

17 days ago

18 days ago

20 days ago

20 days ago

20 days ago

21 days ago

21 days ago

21 days ago

21 days ago

21 days ago

22 days ago

22 days ago

22 days ago

24 days ago

25 days ago

25 days ago

25 days ago

27 days ago

27 days ago

27 days ago

27 days ago

28 days ago

26 days ago

26 days ago

26 days ago

26 days ago

26 days ago

28 days ago

29 days ago

28 days ago

29 days ago

29 days ago

29 days ago

29 days ago

29 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

7 months ago

6 months ago

6 months ago

7 months ago

6 months ago

7 months ago

6 months ago

7 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

5 months ago

7 months ago

7 months ago

6 months ago

7 months ago

6 months ago

7 months ago

6 months ago

7 months ago

6 months ago

7 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

7 months ago

6 months ago

7 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

7 months ago

8 months ago

7 months ago

9 months ago

9 months ago

10 months ago

6 months ago

8 months ago

6 months ago

8 months ago

5 months ago

6 months ago

7 months ago

5 months ago

6 months ago

7 months ago

5 months ago

7 months ago

7 months ago

6 months ago

7 months ago

6 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

8 months ago

6 months ago

6 months ago

8 months ago

6 months ago

6 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

6 months ago

8 months ago

5 months ago

8 months ago

8 months ago

5 months ago

8 months ago

6 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

8 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago