@anjun-brasil/design-system v1.16.4

Anjun Brasil Design System

Sections

• Installation
• Components
  • Accordion
  • Alert Dialog
  • Avatar
  • Button
  • Checkbox
  • Combobox
  • Command
  • Dialog
  • Popover
  • Select
  • Skeleton
  • Switch
  • Table
  • Textarea
  • TextField
  • Toast
  • Tooltip

Installation

pnpm i tailwindcss postcss autoprefixer -D

Create a postcss.config.cjs file and paste this config.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

pnpm i @anjun-brasil/design-system @radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-avatar @radix-ui/react-checkbox cmdk @radix-ui/react-dialog @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-switch @radix-ui/react-select @radix-ui/react-toast@1.1.3 @radix-ui/react-tooltip lucide-react tailwind-variants date-fns react-day-picker

Create a tailwind.config.ts file and extend the Design System theme.

import { defineTailwindConfig } from "@anjun-brasil/design-system";

export default defineTailwindConfig({
  content: [
    // Your content here
    "./src/{app,screens,component}/**/*.{ts,tsx}",
  ],
  // Rest of your custom TailwindCSS config
});

Create a globals.css file at src/styles/globals.css.

After that, add the @tailwind directives for each Tailwind’s layers to your globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Components

Accordion

import { Accordion } from "@anjun-brasil/design-system";

function Example() {
  return (
    <div className="m-auto grid min-h-screen w-full max-w-sm place-items-center">
      <Accordion.Root className="w-full" type="single" collapsible>
        <Accordion.Item value="item-1">
          <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
          <Accordion.Content>
            Yes. It adheres to the WAI-ARIA design pattern.
          </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="item-2">
          <Accordion.Trigger>Is it styled?</Accordion.Trigger>
          <Accordion.Content>
            Yes. It comes with default styles that matches the other components'
            aesthetic.
          </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="item-3">
          <Accordion.Trigger>Is it animated?</Accordion.Trigger>
          <Accordion.Content>
            Yes. It's animated by default, but you can disable it if you prefer.
          </Accordion.Content>
        </Accordion.Item>
      </Accordion.Root>
    </div>
  );
}

Alert Dialog

import { AlertDialog } from "@anjun-brasil/design-system";

function Example() {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger asChild>
        <Button variant="danger">
          <Trash />
          Delete account
        </Button>
      </AlertDialog.Trigger>
      <AlertDialog.Content>
        <AlertDialog.Header>
          <AlertDialog.Title>Are you sure absolutely sure?</AlertDialog.Title>
          <AlertDialog.Description>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </AlertDialog.Description>
        </AlertDialog.Header>
        <AlertDialog.Footer>
          <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
          <AlertDialog.Action>Yes, delete it!</AlertDialog.Action>
        </AlertDialog.Footer>
      </AlertDialog.Content>
    </AlertDialog.Root>
  );
}

Avatar

import { Avatar } from "@anjun-brasil/design-system";

function Example() {
  return (
    <Avatar.Root>
      <Avatar.Image
        src="https://github.com/romarioCamposAnjun.png"
        alt="Romário Campos"
      />
      <Avatar.Fallback>RC</Avatar.Fallback>
    </Avatar.Root>
  );
}

Button

import { Button } from "@anjun-brasil/design-system";

function Example() {
  return <Button>Example button</Button>;
}

Checkbox

import { Checkbox } from "@anjun-brasil/design-system";

function Example() {
  return <Checkbox />;
}

Command

import { useState, useEffect } from "react";
import { Command } from "@anjun-brasil/design-system";

function Example() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && e.metaKey) {
        setOpen((open) => !open);
      }
    };

    document.addEventListener("keydown", down);
    return () => document.removeEventListener("keydown", down);
  }, []);

  return (
    <div className="grid place-items-center">
      <p className="flex items-center justify-center gap-1 text-center text-xl">
        Press{" "}
        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-xs font-medium opacity-100">
          <span className="text-xs">⌘</span>K
        </kbd>
      </p>
      <Command.Dialog open={open} onOpenChange={setOpen}>
        <Command.Input placeholder="Type a command or search..." />
        <Command.List>
          <Command.Empty>No results found.</Command.Empty>
          <Command.Group heading="Suggestions">
            <Command.Item>
              <Calendar className="mr-2 h-4 w-4" />
              <span>Calendar</span>
            </Command.Item>
            <Command.Item>
              <Smile className="mr-2 h-4 w-4" />
              <span>Search Emoji</span>
            </Command.Item>
            <Command.Item>
              <Calculator className="mr-2 h-4 w-4" />
              <span>Calculator</span>
            </Command.Item>
          </Command.Group>
          <Command.Separator />
          <Command.Group heading="Settings">
            <Command.Item>
              <User className="mr-2 h-4 w-4" />
              <span>Profile</span>
              <Command.Shortcut>⌘P</Command.Shortcut>
            </Command.Item>
            <Command.Item>
              <CreditCard className="mr-2 h-4 w-4" />
              <span>Billing</span>
              <Command.Shortcut>⌘B</Command.Shortcut>
            </Command.Item>
            <Command.Item>
              <Settings className="mr-2 h-4 w-4" />
              <span>Settings</span>
              <Command.Shortcut>⌘S</Command.Shortcut>
            </Command.Item>
          </Command.Group>
        </Command.List>
      </Command.Dialog>
    </div>
  );
}

Dialog

import { Button, Dialog, TextField } from "@anjun-brasil/design-system";

function Example() {
  const { toast } = useToast();

  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <Button variant="outline">Edit Profile</Button>
      </Dialog.Trigger>
      <Dialog.Content className="sm:max-w-md">
        <Dialog.Header>
          <Dialog.Title>Edit profile</Dialog.Title>
          <Dialog.Description>
            Make changes to your profile here. Click save when you're done.
          </Dialog.Description>
        </Dialog.Header>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <label htmlFor="name" className="text-right">
              Name
            </label>
            <TextField.Root className="col-span-3">
              <TextField.Input id="name" placeholder="Your name" />
            </TextField.Root>
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <label htmlFor="username" className="text-right">
              Username
            </label>
            <TextField.Root className="col-span-3">
              <TextField.Input id="username" placeholder="Your username" />
            </TextField.Root>
          </div>
        </div>
        <Dialog.Footer>
          <Button>Save changes</Button>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog.Root>
  );
}

Select

import { Popover } from "@anjun-brasil/design-system";

function Example() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <Button variant="outline" className="rounded-full p-3">
          <Settings2 className="h-4 w-4" />
          <span className="sr-only">Open popover</span>
        </Button>
      </Popover.Trigger>
      <Popover.Content className="w-80">
        <div className="grid gap-4">
          <div className="space-y-2">
            <h4 className="font-medium leading-none">Dimensions</h4>
            <p className="text-muted-foreground text-sm">
              Set the dimensions for the layer.
            </p>
          </div>
          <div className="grid gap-2">
            <div className="grid grid-cols-3 items-center gap-4">
              <label htmlFor="width">Width</label>
              <TextField.Root
                id="width"
                defaultValue="100%"
                className="col-span-2 h-8"
              >
                <TextField.Input />
              </TextField.Root>
            </div>
            <div className="grid grid-cols-3 items-center gap-4">
              <label htmlFor="maxWidth">Max. width</label>
              <TextField.Root
                id="maxWidth"
                defaultValue="300px"
                className="col-span-2 h-8"
              >
                <TextField.Input />
              </TextField.Root>
            </div>
            <div className="grid grid-cols-3 items-center gap-4">
              <label htmlFor="height">Height</label>
              <TextField.Root
                id="height"
                defaultValue="25px"
                className="col-span-2 h-8"
              >
                <TextField.Input />
              </TextField.Root>
            </div>
            <div className="grid grid-cols-3 items-center gap-4">
              <label htmlFor="maxHeight">Max. height</label>
              <TextField.Root
                id="maxHeight"
                defaultValue="none"
                className="col-span-2 h-8"
              >
                <TextField.Input />
              </TextField.Root>
            </div>
          </div>
        </div>
        <Popover.Close />
        <Popover.Arrow />
      </Popover.Content>
    </Popover.Root>
  );
}

Select

import { Select } from "@anjun-brasil/design-system";

function Example() {
  return (
    <Select.Root>
      <Select.Trigger>
        <Select.Value placeholder="Select a fruit" />
      </Select.Trigger>
      <Select.Content>
        <Select.Item value="apple">Apple</Select.Item>
        <Select.Item value="banana">Banana</Select.Item>
        <Select.Item value="blueberry">Blueberry</Select.Item>
        <Select.Item value="grapes">Grapes</Select.Item>
        <Select.Item value="pineapple">Pineapple</Select.Item>
      </Select.Content>
    </Select.Root>
  );
}

Skeleton

import { Skeleton } from "@anjun-brasil/design-system";

function Example() {
  return <Skeleton size={48} />;
}

Switch

import { Switch } from "@anjun-brasil/design-system";

function Example() {
  return <Switch />;
}

Table

import { Table } from "@anjun-brasil/design-system";

function Example() {
  return (
    <Table.Root>
      <Table.Caption>A list of your recent invoices.</Table.Caption>
      <Table.Header>
        <Table.Row>
          <Table.Head>Invoice</Table.Head>
          <Table.Head>Status</Table.Head>
          <Table.Head>Method</Table.Head>
          <Table.Head>Amount</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell className="font-medium">INV001</Table.Cell>
          <Table.Cell>Paid</Table.Cell>
          <Table.Cell>Credit Card</Table.Cell>
          <Table.Cell>$250.00</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table.Root>
  );
}

Textarea

import { Textarea } from "@anjun-brasil/design-system";

function Example() {
  return (
    <form>
      <Textarea placeholder="Your message" />
    </form>
  );
}

TextField

import { TextField } from "@anjun-brasil/design-system";

function Example() {
  return (
    <form>
      <TextField.Root>
        <TextField.Input placeholder="Input" />
      </TextField.Root>
    </form>
  );
}

Toast

Pages folder:

src/\_app.tsx

import { ToastProvider } from "@anjun-brasil/design-system";

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <ToastProvider />
    </>
  );
}

App folder:

app/layout.tsx

import { ToastProvider } from "@anjun-brasil/design-system";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        {children}
        <ToastProvider />
      </body>
    </html>
  );
}

Usage:

import { Button, useToast } from "@anjun-brasil/design-system";

export function Example() {
  const { toast } = useToast();

  function handleClick() {
    toast({
      title: "Toast title",
      description: "Toast description",
      status: "success",
    });
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-center">
      <Button onClick={handleClick}>Show toast</Button>
    </main>
  );
}

Tooltip

import { Tooltip } from "@anjun-brasil/design-system";

function Example() {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger asChild>
        <Button
          variant="outline"
          className="h-10 w-10 rounded-full p-0"
          aria-label="Add"
        >
          <Plus size={16} />
        </Button>
      </Tooltip.Trigger>
      <Tooltip.Content>
        <p>Add to library</p>
      </Tooltip.Content>
    </Tooltip.Root>
  );
}