Getting Started

Get up and running with Sugarcoat UI in minutes.

Prerequisites

Make sure you have Node.js 18+ and a React 18+ project set up before proceeding.

Installation#

Install the packages using your preferred package manager:

npmpnpmyarnbun

npm install @sugarcoat/ui-nxt @sugarcoat/core

Project Structure#

After installation, your project should look like this:

src

app

layout.tsx

page.tsx

globals.css

components

package.json

tsconfig.json

Setup#

Import the CSS#

Add the runtime styles to your app's entry point:

// app/layout.tsx or pages/_app.tsx
import "@sugarcoat/core/styles.css";

Use Components#

Import and use components directly:

import { Button } from "@sugarcoat/ui-nxt";
 
export function MyComponent() {
  return (
    <Button variant="solid" color="primary">
      Click me
    </Button>
  );
}

Customize as needed#

Use the css() function for custom styling:

import { Button } from "@sugarcoat/ui-nxt";
import { css } from "@sugarcoat/core/css";
 
export function CustomButton() {
  return (
    <Button className={css({ boxShadow: "lg", mt: "4" })}>
      Custom Styled Button
    </Button>
  );
}

Component Preview#

Here's a quick preview of what you can build:

Tip

Use the asChild prop to render buttons as links while keeping the button styling.

Configuration Options#

Option	Type	Default	Description
`prefix`	`string`	`"sui"`	CSS class prefix
`theme`	`object`	`{}`	Theme customization
`darkMode`	`boolean`	`true`	Enable dark mode support

Breaking Changes

If you're upgrading from v0.x, please check the migration guide for breaking changes.

Next Steps#

Explore Component Documentation
Learn about Theming
Check out Typography