@deckai/deck-ui

v0.0.31

Published

a year ago

presentational ui components for deck.ai

0High
0Medium
0Low

how to consume `deck-ui`

Install @deckai/deck-ui via npm, yarn, or bun package managers. Since this is a privately scoped package, you'll need to be added to the @deckai organization on npm, and run npm login with your npm credentials.

Note: you'll need to have both react and react-dom installed in your project to use deck-ui as they are peer dependencies. No other dependencies are required.

bun add @deckai/deck-ui

styles & fonts

Add the following to your layout.tsx file:

import type { Metadata } from "next";
import "./globals.css";
import "@deckai/deck-ui/styles/styles.css";
import localFont from "next/font/local";
import { ToastProvider } from "@deckai/deck-ui";
const gilroy = localFont({
  src: [
    {
      path: "../../node_modules/@deckai/deck-ui/dist/fonts/Gilroy-Light.ttf",
      weight: "400",
      style: "normal"
    },
    {
      path: "../../node_modules/@deckai/deck-ui/dist/fonts/Gilroy-Regular.ttf",
      weight: "500",
      style: "normal"
    },
    {
      path: "../../node_modules/@deckai/deck-ui/dist/fonts/Gilroy-Medium.ttf",
      weight: "600",
      style: "normal"
    },
    {
      path: "../../node_modules/@deckai/deck-ui/dist/fonts/Gilroy-Bold.ttf",
      weight: "700",
      style: "normal"
    }
  ],
  variable: "--font-gilroy"
});

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={`${gilroy.variable} antialiased`}>
      <body>
        <ToastProvider>{children}</ToastProvider>
      </body>
    </html>
  );
}
export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app"
};

and update your tailwind.config.ts to include the font variable and extend the deck-ui theme. this allows you to use deck-ui colors, typography, and spacing presets in your app.

import type { Config } from "tailwindcss";
import { tailwindConfig } from "@deckai/deck-ui";

export default {
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@deckai/deck-ui/dist/**/*.{js,mjs}"
  ],
  presets: [tailwindConfig],
  theme: {
    extend: {
      fontFamily: {
        gilroy: ["var(--font-gilroy)"]
      }
    }
  }
} satisfies Config;

See NextJS docs for more options.

with typescript

To use deck-ui with typescript, you'll need to add the following to your tsconfig.json file:

{
  "compilerOptions": {
    "paths": {
      "@deckai/deck-ui": ["./node_modules/@deckai/deck-ui/dist/index.d.ts"],
      "@deckai/deck-ui/*": ["./node_modules/@deckai/deck-ui/dist/*"]
    }
  },
  "include": ["node_modules/@deckai/deck-ui/dist/**/*.d.ts"]
}

next config

Update your next.config.ts to automatically transpile the deck-ui package.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ["@deckai/deck-ui", "@deckai/icons"]
};

export default nextConfig;

@deckai/icons is a direct dependency of @deckai/deck-ui, so no additional configuration is needed to use it in your project.

using components

next will handle all the tree shaking for you, so just import components from @deckai/deck-ui directly.

import { Button } from "@deckai/deck-ui";

Server Components Compatibility

The following components must be used within Client Components (you'll need to add the 'use client' directive to the top of any file using these components):

Accordion
Collapsible
Combobox
Dialog/Modal
Dropdown
MultiSelectCombobox
Popover
Switch
Tabs
Toast/ToastProvider
Tooltip
IconRenderer
Any components using event handlers or React hooks

Example usage in a Client Component:

"use client";

import { Tabs } from "@deckai/deck-ui";

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme