# @opensea/ui-kit

[![Storybook](https://raw.githubusercontent.com/storybooks/brand/main/badge/badge-storybook.svg)](https://main--6504e75013bb0df5164a7217.chromatic.com/)
[![npm version](https://badge.fury.io/js/@opensea%2Fui-kit.svg)](https://badge.fury.io/js/@opensea%2Fui-kit)

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

## Getting started

### Install

```sh
pnpm add @opensea/ui-kit
```

or

```sh
yarn add @opensea/ui-kit
```

### Usage

```jsx
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

```sh
pnpm test:unit
```

## Entrypoints

`@opensea/ui-kit` comes with multiple entrypoints.

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

## Setting up tailwind config

```css
@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](../next-themes) package.

### Compound components in server components

Some components like [Select](./src/components/Select/Select.tsx) 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:

```tsx
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:

```tsx
"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:

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

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