Uranus Design System

FeatureGrid é o "porque escolher a Uranus" das landing pages: ícones + títulos + descrições curtas em grid responsivo. A composição é feita com FeatureGrid.Item como children — cada item é explícito, sem array de configuração.

Tokens semânticos

Cores OKLCH, tipografia e radii em CSS-first. Trocar tema é editar variáveis CSS.

Primitives donos

Cada componente shadcn vive como código próprio do seu repositório.

Blocos compostos

Layouts prontos para dashboards: AppShell, AppSidebar, DataTable, e mais.

Docs interativos

Storybook + Fumadocs com exemplos vivos importando o real do código.

'use client';
import { FeatureGrid } from '@uranus-workspace/blocks';
import { Boxes, Layers3, Palette, Sparkles } from 'lucide-react';

export default function FeatureGridDefault() {
  return (
    <FeatureGrid columns={4}>
      <FeatureGrid.Item
        icon={<Palette aria-hidden className="size-5" />}
        title="Tokens semânticos"
        description="Cores OKLCH, tipografia e radii em CSS-first. Trocar tema é editar variáveis CSS."
      />
      <FeatureGrid.Item
        icon={<Boxes aria-hidden className="size-5" />}
        title="Primitives donos"
        description="Cada componente shadcn vive como código próprio do seu repositório."
      />
      <FeatureGrid.Item
        icon={<Layers3 aria-hidden className="size-5" />}
        title="Blocos compostos"
        description="Layouts prontos para dashboards: AppShell, AppSidebar, DataTable, e mais."
      />
      <FeatureGrid.Item
        icon={<Sparkles aria-hidden className="size-5" />}
        title="Docs interativos"
        description="Storybook + Fumadocs com exemplos vivos importando o real do código."
      />
    </FeatureGrid>
  );
}

Uso

import { FeatureGrid } from '@uranus-workspace/blocks';
import { Palette, Sparkles } from 'lucide-react';

<FeatureGrid columns={3}>
  <FeatureGrid.Item
    icon={<Palette aria-hidden />}
    title="Tokens semânticos"
    description="Cores OKLCH, tipografia e radii em CSS-first."
  />
  <FeatureGrid.Item
    icon={<Sparkles aria-hidden />}
    title="Docs interativos"
    description="Storybook + Fumadocs com exemplos vivos."
  />
</FeatureGrid>

Props

columns — 2 | 3 | 4. Default 3. Sempre 1 no mobile e 2 no sm.

Subcomponentes

FeatureGrid.Item — célula com icon?, title, description. Aceita props HTML padrão.

FeatureGrid