Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Headless Components Design

December 18, 2020

Headless Components Design


December 18, 2020

More Decks by takanorip

Other Decks in Design


  1. Self Introduction • takanorip / Takanori Oki • UI designer

    @ClassDo Inc. / Frontend developer • Organizer of WPSG(Web Platform Study Group) ◦ YouTube ◦ Spotify
  2. Headless UI • https://headlessui.dev/ • “Completely unstyled, fully accessible UI

    components, designed to integrate beautifully with Tailwind CSS.”
  3. import { useState } from 'react' import { Switch }

    from '@headlessui/react' function NotificationsToggle() { const [enabled, setEnabled] = useState(false) return ( <Switch checked={enabled} onChange={setEnabled} className={`${ enabled ? 'bg-blue-600' : 'bg-gray-200' } relative inline-flex h-6 rounded-full w-8`} > <span className="sr-only">Enable notifications</span> <span className={`${ enabled ? 'translate-x-4' : 'translate-x-0' } inline-block w-4 h-4 transform bg-white rounded-full`} /> </Switch> ) }
  4. tailwindcss “A utility-first CSS framework packed with classes” <div class="p-6

    max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center"> <div class="flex-shrink-0"> <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo"> </div> <div> <div class="text-xl font-medium text-black">ChitChat</div> <p class="text-gray-500">You have a new message!</p> </div> </div>
  5. What do we do when the style boundary and the

    function boundary are slightly different?