Installation

Install Crafted UI in your project.

Required

Crafted UI requires TailwindCSS to be installed in your project. If you haven’t already installed TailwindCSS, you can do so by following the official installation guide.

Installation

You can install Crafted UI via npm.

npm install crafted-ui

Import Styles

Import the Crafted UI styles in your application’s main CSS file:

@import 'tailwindcss';
@import 'crafted-ui/styles';

This will include all the necessary CSS for the Crafted UI components.

Use Crafted UI

Import and use Crafted UI components in your React application:

🍺 Hoppy Kettle

Join our community for exclusive releases and events
Full Name
Email address
Favorite Beer Style 
import { Button, Fieldset, Field, Input } from 'crafted-ui';

function BreweryClubSignup() {
return (
  <form className="max-w-md mx-auto">
    <Fieldset
      title="🍺 Hoppy Kettle"
      subtitle="Join our community for exclusive releases and events"
    >
      <Field label="Full Name">
        <Input placeholder="Sam Snead" />
      </Field>
      
      <Field label="Email address">
        <Input type="email" placeholder="sam.snead@example.com" />
      </Field>
      
      <Field label="Favorite Beer Style">
        <Input placeholder="IPA, Stout, Lager..." />
      </Field>
      
      <div className="flex gap-3">
        <Button type="button" outline>Maybe Later</Button>
        <Button type="submit" clr="primary">Join the Club</Button>
      </div>
    </Fieldset>
  </form>
);
}

That’s it! You’re now ready to start using Crafted UI components in your project.