CSS Utility Class

Alt. app provides some CSS Utility Classes that you can use to create a user interface. This class is from the Tailwindcss framework.

• Height
• Width
• Size
• Margin
• Padding
• Display
• Gap
• Flex
• Flex Wrap
• Align Items
• Justify Content
• Grid Template Rows
• Grid Template Columns
• Grid Column, only support col-auto and col-span-*
• Grid Row, only support row-auto and row-span-*

Example

view-command.tsx

import { UiText, UiButton, UiInput, UiButton } from '@altdot/extension';


export default function Command() {
  return (
    <div className="p-2">
      <UiText>Hello world!</UiText>
      <div className="mt-4 flex items-center gap-2">
        <UiInput placeholder="First name" />
        <UiInput placeholder="Last name" />
      </div>
      <UiButton className="w-52 mt-4">
        Add
      </UiButton>
    </div>
  )
}