@opensea/ui-kit
v0.5.34
Published
OpenSea's Design System implementation in React
Downloads
22,791
Keywords
Readme
@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.
@opensea/ui-kit
~ components & utilities@openase/ui-kit/hooks
~ hooks@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="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>
}