Getting Started
Your first document
Getting started with twjlabs/ui is a breeze. This guide will walk you through the steps to set up your first project using our component library.
This Page is solely for cli users. If you're not using the cli, please head to Manual Setup Guide
Installation
if you're using twjlabs/ui cli, it should be pretty easy for you
npx @twjlabs/ui initpnpm dlx @twjlabs/ui init this installation will set up a new project with twjlabs/ui and all necessary dependencies. It will create a twj-lib, components/ui and contexts folder for you to start building your components right away. It will also make changes to your css file accordingly.
It will create the following folders and files for you:
contexts/ui-theme-context.tsx- Context to manage themingcontexts/ai-context.tsx- Context to manage AI interactionstwj-lib/font-applier.ts- Utility to apply fontstwj-lib/tw.tsx- Utility for tailwind class managementtwj-lib/types.ts- Type definitions
Changes in layout.tsx
There is one more step to complete the setup. You need to wrap your application with the ThemeProvider and add fonts to enable theming and global styles. Open your layout.tsx file and make the following changes:
import './globals.css';
import { ThemeProvider } from '@/contexts/ui-theme-context';
import { AIContextProvider } from "@/contexts/ai-context";
// 1. Import the fonts
import {
Manrope,
Lora,
Orbitron,
Fredoka,
Roboto_Condensed,
Nunito,
Grenze_Gotisch
} from "next/font/google";
// 2. Setup the font instances with specific variable names
const manrope = Manrope({ subsets: ["latin"], variable: "--font-manrope", display: "swap" });
const lora = Lora({ subsets: ["latin"], variable: "--font-lora", display: "swap" });
const orbitron = Orbitron({ subsets: ["latin"], variable: "--font-orbitron", display: "swap" });
const fredoka = Fredoka({ subsets: ["latin"], variable: "--font-fredoka", display: "swap" });
const robotoCondensed = Roboto_Condensed({ subsets: ["latin"], variable: "--font-roboto-condensed", display: "swap" });
const nunito = Nunito({ subsets: ["latin"], variable: "--font-nunito", display: "swap" });
const grenzeGotisch = Grenze_Gotisch({ subsets: ["latin"], variable: "--font-grenze-gotisch", display: "swap" });
export default function Layout({ children }: LayoutProps<'/'>) {
return (
// Add any theme you want as initialTheme
<ThemeProvider initialTheme='brutalist'>
<AIContextProvider
initialPersona="technical_debugger"
>
<html lang="en" className={`${manrope.variable}
${lora.variable}
${orbitron.variable}
${fredoka.variable}
${robotoCondensed.variable}
${nunito.variable}
${grenzeGotisch.variable}`
}
suppressHydrationWarning>
<body className="flex flex-col min-h-screen">
{children}
</body>
</html>
</AIContextProvider>
</ThemeProvider>
);
}Ok so, first you need to import the ThemeProvider from the ui-theme-context and AIContextProvider from the ai-context. Then, import the fonts you want to use from next/font/google. Next, create instances of each font with a unique CSS variable name. Finally, wrap your application in the ThemeProvider and AIContextProvider, setting an initial theme of your choice, and apply the font variables to the <html> element.
That's it! You're now ready to start building with twjlabs/ui. Happy coding!
Next Steps
- Explore the Components to see what you can use in your project.
- Check out the Theming Guide to customize the look and feel of your application.