@uniformdev/csk-components

@uniformdev/csk-components is a Components Starter Kit that provides a set of basic components for building websites within a Uniform project. These components can be used directly from the package or extracted into your project for customization.

Installation

To use @uniformdev/csk-components, install it as a dependency in your project:

npm install @uniformdev/design-extensions-tools
npm install @uniformdev/csk-components

Setup Instructions

Create CSS Folder

By default, the CSS files will be placed in the ./src/styles directory. You can also specify a custom path using the STYLES_PATH environment variable:

STYLES_PATH=

Wrap Pages with DesignExtensionsProvider

Wrap your page using DesignExtensionsProvider from @uniformdev/design-extensions-tools/components/providers/server:

import { notFound } from 'next/navigation';
import { CANVAS_EDITOR_STATE } from '@uniformdev/canvas';
import {
  resolveRouteFromCode,
  UniformComposition,
  UniformPageParameters,
  createUniformStaticParams,
} from '@uniformdev/next-app-router';
import { emptyPlaceholderResolver } from '@uniformdev/csk-components/components/canvas/emptyPlaceholders';
import { compositionCache } from '@uniformdev/csk-components/utils/getSlotComponents';
import { DesignExtensionsProvider } from '@uniformdev/design-extensions-tools/components/providers/server';
import { componentResolver } from '@/components';
import getAllStaticGeneratedPages from '@/utils/getAllStaticGeneratedPages';

export const generateStaticParams = async () => {
  const paths = await getAllStaticGeneratedPages();
  return createUniformStaticParams({
    paths,
  });
};

export default async function UniformPage(props: UniformPageParameters) {
  const result = await resolveRouteFromCode(props);

  if (!result.route) {
    notFound();
  }

  return (
    <DesignExtensionsProvider isPreviewMode={result.pageState.compositionState === CANVAS_EDITOR_STATE}>
      <UniformComposition
        {...result}
        resolveComponent={componentResolver}
        resolveEmptyPlaceholder={emptyPlaceholderResolver}
        compositionCache={compositionCache}
      />
    </DesignExtensionsProvider>
  );
}

export { generateMetadata } from '@/utils/metadata';

Pull Design Tokens

Run the following command to pull and generate CSS variables for all design tokens:

First, add the following scripts to your package.json:

"scripts": {
    "pull:dex": "design-extensions-tools pull",
    "apply:dex": "design-extensions-tools apply",
    "push:dex": "design-extensions-tools push",
}

npm run pull:dex
npm run apply:dex

Import CSS Files

Import the required CSS files into your layout.tsx or main layout component:

import '@/styles/colors.css';
import '@/styles/dimensions.css';
import '@/styles/fonts.css';
import '@/styles/borders.css';

Extend Tailwind Configuration

To extend Tailwind CSS with new classes and include generated design tokens, update your globals.css file as follows:

@import 'tailwindcss' source(none);

@source '../components/**/*.{js,ts,jsx,tsx,mdx}';
@source '../app/**/*.{js,ts,jsx,tsx,mdx}';
@source '../../../../packages/csk-components/**/*.{js,ts,jsx,tsx,mdx}';

@import './tailwindcss.colors.css';
@import './tailwindcss.dimension.css';
@import './tailwindcss.font.css';
@import './tailwindcss.border.css';

@source inline("{lg:,md:,}grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12,none,subgrid}");
@source inline("{lg:,md:,}gap-{0,0.5,1,1.5,2,2.5,3,3.5,4,5,6,8,10,12,16,20,24,32,40,48,56,64,72,80,96,px}");
@source inline("{lg:,md:,}gap-x-{0,0.5,1,1.5,2,2.5,3,3.5,4,5,6,8,10,12,16,20,24,32,40,48,56,64,72,80,96,px}");
@source inline("{lg:,md:,}gap-y-{0,0.5,1,1.5,2,2.5,3,3.5,4,5,6,8,10,12,16,20,24,32,40,48,56,64,72,80,96,px}");
@source inline("{lg:,md:,}p{x,}-{0,0.5,1,1.5,2,2.5,3,3.5,4,5,6,8,10,12,16,20,24,32,40,48,56,64,72,80,96,px}");
@source inline("{lg:,md:,}m{x,}-{0,0.5,1,1.5,2,2.5,3,3.5,4,5,6,8,10,12,16,20,24,32,40,48,56,64,72,80,96,px}");
@source inline("{lg:,md:,}-m{x,}-{0,1,2,3,4,5,6,8,10,12,16,20,24,32,40,48,56,64,72,80,96,px}");
@source inline("{lg:,md:,}flex-{col,row,col-reverse,row-reverse}");
@source inline("{lg:,md:,}justify-{normal,start,end,center,between,around,evenly,stretch}");
@source inline("{lg:,md:,}items-{start,end,center,baseline,stretch}");
@source inline("{lg:,md:,}self-{start,end,center,baseline,stretch}");
@source inline("{lg:,md:,}{col,row}-start-{1,2,3,4,5,6,7,8,9,10,11,12,none,subgrid}");
@source inline("{lg:,md:,}{col,row}-{auto,span-{1,2,3,4,5,6,7,8,9,10,11,12},span-full}");
@source inline("{lg:,md:,}justify-{start,center,end}");
@source inline("{lg:,md:,}flex-{nowrap,wrap,wrap-reverse}");
@source inline("{lg:,md:,}text-{xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl,9xl}");
@source inline("text-{left,center,right}");
@source inline("{lg:,md:,}font-{normal,medium,bold,extrabold}");
@source inline("{lg:,md:,}prose-{sm,base,lg,xl,2xl}");
@source inline("{lg:,md:,}line-clamp-{none,1,2,3,4,5,6}");
@source inline("{lg:,md:,}{uppercase,lowercase,capitalize}");
@source inline("{lg:,md:,group-hover:,}{underline,overline,line-through}");
@source inline("{lg:,md:,}tracking-{tighter,tight,normal,wide,wider,widest}");
@source inline("aspect-{auto,square,video}");
@source inline("shrink-{0,1}");
@source inline("{hover:,group-hover:,}opacity-{0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100}");
@source inline("{hover:,group-hover:,}scale-{0,50,75,90,95,100,105,110,125,150}");
@source inline("h-{full,screen}");

@custom-variant dark (&:where(.dark, .dark *));

@plugin "@tailwindcss/typography";

Commands

extract Command

The extract command allows you to copy the source code of canvas, UI, and content components (along with their utilities) directly into your project. This is useful if you want to modify components rather than importing them from the package.

Usage

First, add the following script to your package.json:

"scripts": {
    "component:extract": "csk-components extract",
}

Run the command using:

npm run component:extract

Options

• -c, --components <components...> – Specifies which canvas components to extract. Example components include:

  Accordion, DemoHero, Banner, Carousel, Section, Text, Button, etc.

Example

Extract specific canvas components:

npm run component:extract -- --components Text Button Accordion

If no arguments are provided, the CLI will extract all available components.