Fulldev UI

Docs Components Blocks Showcase

Header

---
import Header from 'fulldev-ui/components/Header.astro'
---

<Header
  heading="Fulldev UI"
  links={[
    {
      text: 'Docs',
      href: '/overview/introduction/',
    },
    {
      text: 'Github',
      href: 'https://github.com/fulldotdev/ui',
    },
  ]}
  buttons={[
    {
      title: 'X / Twitter',
      icon: 'brand-x',
      href: 'https://x.com/silveltm',
      target: '_blank',
      contrast: true,
    },
  ]}
  frame="fill"
  position="relative"
  drawer={[
    {
      links: [
        { text: 'Docs', href: '/overview/introduction' },
        { text: 'Components', href: '/typography/heading' },
        { text: 'Blocks', href: '/blocks' },
      ],
    },
    {
      heading: 'Overview',
      links: [
        { text: 'Installation', href: '/overview/installation' },
        { text: 'Integration', href: '/overview/integration' },
        { text: 'Theming', href: '/overview/theming' },
        { text: 'Frameworks', href: '/overview/frameworks' },
      ],
    },
    { heading: 'Structure', folder: 'structure' },
    { heading: 'Typography', folder: 'typography' },
    { heading: 'Base', folder: 'base' },
  ]}
/>
---
import Header from 'fulldev-ui/components/Header.astro'
---

<Header
  heading="Fulldev UI"
  links={[
    {
      text: 'Docs',
      href: '/overview/introduction/',
    },
    {
      text: 'Github',
      href: 'https://github.com/fulldotdev/ui',
    },
  ]}
  buttons={[
    {
      text: 'Docs',
      href: '/overview/introduction/',
    },
    {
      title: 'X / Twitter',
      icon: 'brand-x',
      href: 'https://x.com/silveltm',
      target: '_blank',
    },
  ]}
  frame="fill"
  position="relative"
/>
---
import Header from 'fulldev-ui/components/Header.astro'
---

<Header
  heading="Fulldev UI"
  links={[
    {
      text: 'Docs',
      href: '/overview/introduction/',
    },
    {
      text: 'Github',
      href: 'https://github.com/fulldotdev/ui',
    },
  ]}
  buttons={[
    {
      text: 'Docs',
      href: '/overview/introduction/',
      contrast: true,
    },
    {
      title: 'X / Twitter',
      icon: 'brand-x',
      href: 'https://x.com/silveltm',
      target: '_blank',
      contrast: true,
    },
  ]}
  frame="panel"
  position="relative"
/>
---
import Header from 'fulldev-ui/components/Header.astro'
---

<Header
  heading="Fulldev UI"
  links={[
    {
      text: 'Docs',
      href: '/overview/introduction/',
    },
    {
      text: 'Github',
      href: 'https://github.com/fulldotdev/ui',
    },
  ]}
  buttons={[
    {
      title: 'X / Twitter',
      icon: 'brand-x',
      href: 'https://x.com/silveltm',
      target: '_blank',
      contrast: true,
    },
  ]}
  frame="fill"
  position="relative"
  color="brand"
/>
---
import Header from 'fulldev-ui/components/Header.astro'
---

<Header
  heading="Fulldev UI"
  links={[
    {
      text: 'Docs',
      href: '/overview/introduction/',
    },
    {
      text: 'Github',
      href: 'https://github.com/fulldotdev/ui',
    },
  ]}
  buttons={[
    {
      title: 'X / Twitter',
      icon: 'brand-x',
      href: 'https://x.com/silveltm',
      target: '_blank',
      contrast: true,
    },
  ]}
  frame="fill"
  position="relative"
  color="brand"
/>