An ever– expanding library of React components, primitives, and tools.
Atelier® Kit is a set of React components and hooks that are used for various projects. The components are built using Radix UI primitives and are designed to be used with React. The design system contains a custom theme, custom components and custom hooks.
Note: This monorepo holds the source code for the following packages.
@atlrdsgn/kit- website [
apps/www] - docs [
apps/docs] @atlrdsgn/tsconfig– privateeslint-config-['atlrdsgn']– private
To get started, add @atlrdsgn/kit to your dependencies.
yarn add @atlrdsgn/kit
pnpm add @atlrdsgn/kit
npm install @atlrdsgn/kit
Import the .css file, and wrap your application.
You need to wrap your app with the KitProvider context so that the .css file is available to all components.
import '@atlrdsgn/kit/css';
import '...other_styles.css or .scss';
import { KitProvider } from '@atlrdsgn/kit';
export default function App({ Component, pageProps }) {
return (
<KitProvider>
<Component {...pageProps} />
</KitProvider>
);
}if you are using Next.js app directory you may need to create your own provider component, you can do that by creating a new component called theme-provider.tsx and adding the following code.
'use client';
import { KitProvider } from '@atlrdsgn/kit';
const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
return (
<>
<KitProvider>{children}</KitProvider>
</>
);
};
export default ThemeProvider;import your theme-provider component into your app/layout.tsx file.
import React from 'react';
import { ThemeProvider } from '@/components/theme-provider';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html
lang='en'
suppressHydrationWarning>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}Build smaller components using individual primitives and elements.
import React from 'react';
import { Container } from '@atlrdsgn/kit';
<Container width='medium'>..</Container>;(or) import multiple primitives and compose complex components.
import React from 'react';
import { Canvas, Text, Button } from '@atlrdsgn/kit';
export const DefaultExample = () => (
<Canvas>
<Text size='sm'>ATELIERKIT®</Text>
<Button size='sm'>Small button</Button>
</Canvas>
);next.kit: Edit on CodeSandbox →react.kit.ts: Edit on CodeSandbox →