@deckai/deck-ui
v0.0.13
Published
presentational ui components for deck.ai
Downloads
577
Readme
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-uistyles & 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";
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>{children}</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;
import type { Config } from "tailwindcss";See NextJS docs for more options.
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/components/<COMPONENT> directly.
import { Button } from "@deckai/deck-ui/components/Button";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):
TabsCombobox- Any components using event handlers or React hooks
Example usage in a Client Component:
"use client";
import { Tabs } from "@deckai/deck-ui";