GitHub

Getting started

To use the Functn Component Library, your project will need to be set up with a few things. Firstly, these components assume the following tech stack:

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS

Install 3rd party dependencies

Various components in the component library use 3rd party libraries. On the documentation page for each component you'll find which 3rd party libraries are required. You are free to install these libraries in your project as and when you need them but there are some libraries you'll definitely need:

3rd Party LibrariesversionInstall command
clsx^2.1.1npm install clsx@^2.1.1
tailwind-merge^3.4.0npm install tailwind-merge@^3.4.0
react-aria-components^1.14.0npm install react-aria-components@^1.14.0
class-variance-authority^0.7.1npm install class-variance-authority@^0.7.1

To install them all at once, run the following command:

npm install clsx@^2.1.1 tailwind-merge@^3.4.0 react-aria-components@^1.14.0 class-variance-authority@^0.7.1

Copy required folders

Create a /ui folder at the top level of your project (inside the src folder if your project uses one). Then copy over the following folders:

Copy to project
ui/hooks/
/lib/

Our components make use of these hooks and utilities so you'll need them ready to go.

The globals.css files

The components in this library use Tailwind CSS classes to style the components. They assume that some Tailwind utility classes have been defined in your project's globals.css file. the classes you need to define are:

  • The primary color scale (this is usually the brand color)
  • The gray color scale
  • Semantic color scales (error, warning, info, success)
  • Font variables
  • A few spacing variables (page width, navbar height)
  • Focus ring styles

Here's an example of what you need to add to your globals.css file:

Example globals.css file
@import 'tailwindcss';
@import './typography.css';
 
@theme inline {
  /* Theme font variables */
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
 
  /* Remove all built in Tailwind colors */
  --color-\*: initial;
 
  --color-white: #ffffff;
  --color-black: #000000;
 
  /* Theme primary colors */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bedbff;
  --color-primary-300: #8ec5ff;
  --color-primary-400: #51a2ff;
  --color-primary-500: #2b7fff;
  --color-primary-600: #155dfc;
  --color-primary-700: #1447e6;
  --color-primary-800: #193cb8;
  --color-primary-900: #1c398e;
  --color-primary-950: #162456;
 
  /* Theme gray colors */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #d4d4d4;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a1a1a1;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
  --color-gray-950: #0a0a0a;
 
  /* Theme semantic colors */
  --color-error-300: #ffa2a2;
  --color-error-400: #ff6467;
  --color-error-500: #fb2c36;
  --color-error-600: #e7000b;
  --color-error-700: #c10007;
 
  --color-warning-300: #ffdf20;
  --color-warning-400: #fdc700;
  --color-warning-500: #f0b100;
  --color-warning-600: #d08700;
  --color-warning-700: #a65f00;
 
  --color-info-300: #53eafd;
  --color-info-400: #00d3f2;
  --color-info-500: #007595;
  --color-info-600: #007595;
  --color-info-700: #007595;
 
  --color-success-300: #5ee9b5;
  --color-success-400: #00d492;
  --color-success-500: #00bc7d;
  --color-success-600: #009966;
  --color-success-700: #007a55;
 
  /* Focus ring color */
  --color-focus: #c07000;
 
  /* Page widths */
  --spacing-page-width-skinny: 56rem;
  --spacing-page-width: 76rem;
  --spacing-page-width-wide: 90rem;
 
  /* Other meaningful size variables */
  --spacing-navbar-height: 4.5rem;
}
 
@utility focus-ring {
  @apply focus-visible:ring-focus ring-offset-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none;
}
 
@utility manual-focus-ring {
  @apply ring-focus ring-2 ring-offset-2 ring-offset-white outline-none;
}
 
@utility focus-ring-inverse {
  @apply ring-offset-focus focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:outline-none;
}
 
@utility manual-focus-ring-inverse {
  @apply ring-offset-focus ring-2 ring-white ring-offset-2 outline-none;
}