Skip to main content
Frontend primitives are the building blocks of user interfaces in the Serial application. These reusable components ensure consistency across the app and streamline the development process. In this article, we’ll explore how frontend primitives are used in Serial and how you can view them all in one place. Serial frontend primitives are built on top of Shadcn and Radix. The naming should be 1:1 with Shadcn and Radix except for the Modal component which is built on top of the Radix / Shadcn Dialog component.

​
Viewing All Frontend Primitives

Serial provides a convenient way to view and interact with all available frontend primitives. You can access this showcase by navigating to the /frontend-primitives route in the Serial app. This page serves as a comprehensive catalog of UI components, allowing developers and designers to see all available primitives in one place. 
function FrontendPrimitives() {
  return (
    <div className="flex h-screen overflow-hidden">
      <Sidebar />
      <div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
        <Header />
        <div className="flex w-full flex-col gap-y-8 p-8">
          <FrontendPrimitivesButtons />
          <FrontendPrimitivesTooltips />
          <FrontendPrimitivesTables />
          {/* ... other primitive components ... */}
        </div>
      </div>
    </div>
  );
}
This main component renders various sub-components, each representing a category of frontend primitives.

​
Examples of Frontend Primitives

Let’s look at some specific examples of frontend primitives used in Serial:

​
1. Basic Tags

Tags are used to display small pieces of information or status indicators. Serial offers a TagBasic component with various sizes and variants: 
const FrontendPrimitivesTagsBasic = () => {
  return (
    <FrontendPrimitivesCard title="Basic Tags">
      <div className="flex flex-col gap-y-2">
        <div className="text-lg font-medium">Sizes</div>
        <div className="flex flex-wrap items-start gap-2">
          {["xs", "sm", "md", "lg"].map((size) => (
            <TagBasic
              key={size}
              variant="CYCLE_TIME"
              size={size as "xs" | "sm" | "md" | "lg"}
              tooltip
            />
          ))}
        </div>
        {/* ... more tag examples ... */}
      </div>
    </FrontendPrimitivesCard>
  );
};

​
2. Loaders

Loaders are essential for indicating loading states. Serial provides a Loader component with various sizes: 
const FrontendPrimitivesLoaders = () => {
  return (
    <FrontendPrimitivesCard title="Loaders">
      <div className="flex flex-col gap-y-2">
        <div className="text-lg font-medium">Loader Sizes</div>
        <div className="flex gap-2">
          <Loader size="xs" />
          <Loader size="sm" />
          <Loader size="md" />
          <Loader size="lg" />
          <Loader size="xl" />
          <Loader size="2xl" />
          <Loader size="3xl" />
          <Loader size="4xl" />
        </div>
      </div>
    </FrontendPrimitivesCard>
  );
};

​
3. Command Component

The Command component provides a powerful interface for user input and selection: 
const FrontendPrimitivesCommand = () => {
  return (
    <FrontendPrimitivesCard title="Command">
      <Modal.Root>
        <Modal.Trigger asChild>
          <Button variant="PRIMARY">Open Command</Button>
        </Modal.Trigger>
        <Modal.Content>
          <Command.Root className="rounded-lg border shadow-md">
            {/* Command content */}
          </Command.Root>
        </Modal.Content>
      </Modal.Root>
    </FrontendPrimitivesCard>
  );
};

​
Conclusion

Frontend primitives in Serial provide a consistent and efficient way to build user interfaces. By centralizing these components and making them easily accessible through the /frontend-primitives route, Serial ensures that developers can quickly find and implement the UI elements they need. This approach promotes consistency across the application and speeds up the development process. As you build features for Serial, make sure to leverage these existing primitives and contribute new ones when necessary. The frontend primitives showcase is an invaluable resource for understanding the available UI components and how to use them effectively in your projects.