tackle

Tackle is a set of React components I created as an ongoing project for practicing all sorts of front-end skills. I needed a project I could work on in bits and pieces while still finding opportunities to learn new design patterns and technologies. Tackle is primarily built with React, TypeScript, TailwindCSS, and Framer Motion. I also used an a11y plugin to ensure the components are accessible.

For now, these components will only work when used in client-side code, but I'd like to keep iterating on this project to make them compatible as server components too.

Check out the tackle docs here 😄

Installation

Tackle is available as an npm package.

npm:

npm install tackle-ui

yarn:

yarn add tackle-ui

Documentation

View the tackle docs here. Code examples are available in the Docs tab for each component.

Getting Started

Here is an example of a basic app using tackle's Button component:

import * as React from 'react';
import { Button } from 'tackle-ui';

function App() {
  return <Button label="Hello World" />;
}

In the interactive demo below, try changing the code and see how it affects the output. (Hint: change variant to "secondary" and color to "blue". For more options, see the Button component page in the docs.)