Installation Guide

All you need to get started with Tailframes UI Kit.

Before you begin

For those unfamiliar with Tailwind CSS, the optimal starting point for embarking on your journey is the official Tailwind CSS documentation. It serves as an invaluable resource for kickstarting your project with Tailwind CSS, offering comprehensive step-by-step instructions on installation, configuration, and usage, ensuring a smooth onboarding experience for developers. Notably, the documentation provides detailed descriptions tailored for all popular frontend frameworks.

Installation

Tailframes ensures compatibility with the latest version of Tailwind CSS v3. While most examples rely on the default Tailwind CSS configuration, some may require the additional first-party plugins installed @tailwindcss/forms, or tailwind-scrollbar.

Font customization

While we suggest employing Inter as the default font, it's not obligatory. You are free to choose any other font that best suits your preferences. You can easily customize it using `tailwind.config.js`.

The simplest method to incorporate it is by referencing a <link> tag to the CDN.

<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

HTML + JavaScript

Just copy the desired HTML snippet from the Tailframes UI Kit and paste it into your project files. Adjust classes, attributes, or content according to your project's needs.

Most components operate smoothly without requiring JavaScript, providing a hassle-free, plug-and-play experience. Nevertheless, for certain HTML components, incorporating additional JavaScript code becomes necessary to enable interactivity. You can quickly recognize instances with basic JavaScript attached, clearly labeled as Require JS . If you wish, feel free to customize the scripts according to your requirements.

React

Tailframes React components are not tied to any particular React framework, and they are adaptable for use with Next.js, Remix, Astro, or any other React project. To get started, follow these steps:

Download components

Download the source files from the react-components GitHub repository, and place them in your project's preferred location.

Don't forget to also get:
  • `utils.ts`, which contains functions utilized by the components,
  • assets, which contains icons utilized by the components.

Install dependencies

Install the following dependencies:

npm install clsx class-variance-authority tailwind-merge --save
npm install @tailwindcss/forms tailwind-scrollbar --save-dev

TypeScript

This project and its components are made with TypeScript. If you'd rather go for plain JavaScript files, go ahead and use the script from the react-components repository to generate the JSX version of components.

npm run jsx-components
Introduction
Icons