Home / File/ styles.tsx — ui Source File

styles.tsx — ui Source File

Architecture documentation for styles.tsx, a tsx file in the ui codebase. 1 imports, 0 dependents.

File tsx 1 imports

Entity Profile

Dependency Diagram

graph LR
  e9a69926_77b0_43dc_6f7d_6a9813db33b4["styles.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  e9a69926_77b0_43dc_6f7d_6a9813db33b4 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  style e9a69926_77b0_43dc_6f7d_6a9813db33b4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import * as React from "react"

export const STYLES = [
  {
    name: "vega",
    title: "Vega",
    description: "The classic shadcn/ui look. Clean, neutral, and familiar.",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="128"
        height="128"
        viewBox="0 0 24 24"
        fill="none"
        role="img"
        color="currentColor"
      >
        <path
          d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z"
          stroke="currentColor"
          strokeWidth="2"
        ></path>
      </svg>
    ),
  },
  {
    name: "nova",
    title: "Nova",
    description: "Reduced padding and margins for compact layouts.",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="128"
        height="128"
        viewBox="0 0 24 24"
        fill="none"
        role="img"
        color="currentColor"
      >
        <path
          d="M2 12C2 9.19974 2 7.79961 2.54497 6.73005C3.02433 5.78924 3.78924 5.02433 4.73005 4.54497C5.79961 4 7.19974 4 10 4H14C16.8003 4 18.2004 4 19.27 4.54497C20.2108 5.02433 20.9757 5.78924 21.455 6.73005C22 7.79961 22 9.19974 22 12C22 14.8003 22 16.2004 21.455 17.27C20.9757 18.2108 20.2108 18.9757 19.27 19.455C18.2004 20 16.8003 20 14 20H10C7.19974 20 5.79961 20 4.73005 19.455C3.78924 18.9757 3.02433 18.2108 2.54497 17.27C2 16.2004 2 14.8003 2 12Z"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinejoin="round"
        ></path>
      </svg>
    ),
  },
  {
    name: "maia",
    title: "Maia",
    description: "Soft and rounded, with generous spacing.",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="128"
        height="128"
        viewBox="0 0 24 24"
        fill="none"
        role="img"
// ... (62 more lines)

Types

Dependencies

  • react

Frequently Asked Questions

What does styles.tsx do?
styles.tsx is a source file in the ui codebase, written in tsx.
What does styles.tsx depend on?
styles.tsx imports 1 module(s): react.
Where is styles.tsx in the architecture?
styles.tsx is located at apps/v4/registry/styles.tsx (directory: apps/v4/registry).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free